20 Pure CSS Toggles & Switches
Outline
A pure-stroke toggle — track and thumb are outlines only, no fills. When toggled on, the thumb fills with brand color. Minimalist; pairs with the brutalist demo.
Outline the 18th 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-out">
<input class="tg-out-input" type="checkbox" checked>
<span class="tg-out-track" aria-hidden="true">
<span class="tg-out-thumb"></span>
</span>
<span class="tg-out-label">Sync</span>
</label> .tg-out {
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-family: "Inter", "Segoe UI", system-ui, sans-serif;
font-size: 14px;
color: #f0eeff;
user-select: none;
}
.tg-out-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-out-track {
position: relative;
width: 56px;
height: 28px;
background: transparent;
border: 1px solid #6a6a7a;
border-radius: 999px;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.tg-out-thumb {
position: absolute;
top: 50%;
left: 3px;
width: 20px; height: 20px;
border-radius: 50%;
background: transparent;
border: 1px solid #6a6a7a;
transform: translateY(-50%);
transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
background 0.2s ease,
border-color 0.2s ease;
}
.tg-out-input:checked ~ .tg-out-track {
border-color: #7c6cff;
}
.tg-out-input:checked ~ .tg-out-track .tg-out-thumb {
/* Inner width: 56 - 2 = 54. Thumb 20. Max left: 54-20-3 = 31. */
left: 31px;
background: #7c6cff;
border-color: #7c6cff;
}
.tg-out-input:focus-visible ~ .tg-out-track {
outline: 2px solid #7c6cff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.tg-out-track,
.tg-out-thumb { transition: none; }
}