20 Pure CSS Toggles & Switches
Neon Cyber
A glowing neon outline toggle — dark track with a cyan thumb that pulses with a soft glow when active. Futuristic dashboard aesthetic.
Neon Cyber the 10th of 20 designs in the 20 Pure CSS Toggles & Switches collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<label class="tg-neon">
<input class="tg-neon-input" type="checkbox" checked>
<span class="tg-neon-track" aria-hidden="true">
<span class="tg-neon-thumb"></span>
</span>
<span class="tg-neon-label">Shields</span>
</label> .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; }
}