20 Pure CSS Toggles & Switches
Brutalist
Hard edges, no shadows, monospace label, raw markup feel. The track and thumb are pure rectangles. A counterpoint to polished SaaS-style toggles.
Brutalist the 11th 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-brut">
<input class="tg-brut-input" type="checkbox" checked>
<span class="tg-brut-track" aria-hidden="true">
<span class="tg-brut-thumb"></span>
</span>
<span class="tg-brut-label">Tracking</span>
</label> .tg-brut {
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-family: "Courier New", ui-monospace, monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #f0eeff;
user-select: none;
}
.tg-brut-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-brut-track {
/* Outer 60×28; with 2px border, inner space is 56×24. Thumb is a
24×24 white block that slides inside that inner space. Track
stays dark in both states — the thumb's position is the signal,
not a color inversion, so the state is readable at a glance even
in a static preview. */
position: relative;
width: 60px;
height: 28px;
background: #1a1a1a;
border: 2px solid #f0eeff;
border-radius: 0;
transition: background 0.1s linear;
box-sizing: border-box;
}
.tg-brut-thumb {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 100%;
background: #f0eeff;
border-radius: 0;
transition: left 0.1s linear;
}
.tg-brut-input:checked ~ .tg-brut-track .tg-brut-thumb {
/* Inner width is 56px, thumb width 24px → 32px is the rightmost
position that keeps the thumb fully inside the border. The track
stays dark in both states — the thumb's position is the only
state signal. Pure brutalist: stark contrast, no decoration. */
left: 32px;
}
.tg-brut-input:focus-visible ~ .tg-brut-track {
outline: 2px solid #ff6c8a;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.tg-brut-track,
.tg-brut-thumb { transition: none; }
}