CSS
.tg-neon {
display: inline-flex;
align-items: center;
gap: 14px;
cursor: pointer;
font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #b8e8f0;
user-select: none;
}
.tg-neon-input {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.tg-neon-track {
position: relative;
width: 54px;
height: 26px;
background: #0a1320;
border: 1px solid rgba(0, 220, 255, 0.3);
border-radius: 999px;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.tg-neon-thumb {
position: absolute;
top: 50%;
left: 3px;
width: 18px; height: 18px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #6be8ff 0%, #0a90b8 100%);
transform: translateY(-50%);
box-shadow:
0 0 6px rgba(0, 220, 255, 0.4),
inset 0 1px 1px rgba(255,255,255,0.4);
transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.25s ease;
}
.tg-neon-input:checked ~ .tg-neon-track {
border-color: rgba(0, 220, 255, 0.9);
box-shadow:
0 0 12px rgba(0, 220, 255, 0.5),
inset 0 0 8px rgba(0, 220, 255, 0.15);
}
.tg-neon-input:checked ~ .tg-neon-track .tg-neon-thumb {
left: 33px;
box-shadow:
0 0 14px rgba(0, 220, 255, 0.9),
inset 0 1px 1px rgba(255,255,255,0.5);
}
.tg-neon-input:focus-visible ~ .tg-neon-track {
outline: 2px solid #6be8ff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.tg-neon-track,
.tg-neon-thumb { transition: none; }
}