3D Toggle Switch
A chunky switch with real thickness: the track is a slab with a front edge, the knob a raised puck with its own side. Press it and the puck sinks into the slab, then slides across when you let go.
Also known as: 3d toggle switch css, pushable toggle switch, raised knob switch.
HTML
<label class="tgl-3d"> <input type="checkbox" role="switch" aria-label="Turbo"> <span class="tgl-3d-track" aria-hidden="true"><span class="tgl-3d-knob"></span></span> </label>
CSS
.tgl-3d {
--c: var(--tgl-color, #3b82f6);
font-size: var(--tgl-size, 24px);
position: relative;
display: inline-block;
vertical-align: middle;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.tgl-3d input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tgl-3d-track {
position: relative;
display: block;
width: 4.2em;
height: 2.1em;
border-radius: 1.05em;
background: #cfd5de;
box-shadow:
inset 0 0.2em 0.3em rgb(0 0 0 / 0.2),
0 0.3em 0 #a3acb9,
0 0.45em 0.5em rgb(0 0 0 / 0.18);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.tgl-3d-knob {
position: absolute;
top: 0.15em;
left: 0.15em;
width: 1.8em;
height: 1.5em;
border-radius: 0.9em / 0.75em;
background: linear-gradient(#fff, #eceff3);
box-shadow:
inset 0 1px 0 #fff,
0 0.3em 0 #b3bbc7,
0 0.4em 0.45em rgb(0 0 0 / 0.3);
transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1.2), box-shadow 0.12s ease;
}
.tgl-3d input:checked + .tgl-3d-track {
background: var(--c);
box-shadow:
inset 0 0.2em 0.3em rgb(0 0 0 / 0.25),
0 0.3em 0 color-mix(in srgb, var(--c) 65%, #000),
0 0.45em 0.5em rgb(0 0 0 / 0.18);
}
.tgl-3d input:checked + .tgl-3d-track .tgl-3d-knob { transform: translateX(2.1em); }
/* pressed: the puck sinks, so its side shrinks */
.tgl-3d:active .tgl-3d-knob {
box-shadow:
inset 0 1px 0 #fff,
0 0.1em 0 #b3bbc7,
0 0.15em 0.2em rgb(0 0 0 / 0.3);
transform: translateY(0.2em);
}
.tgl-3d:active input:checked + .tgl-3d-track .tgl-3d-knob { transform: translate(2.1em, 0.2em); }
.tgl-3d input:focus-visible + .tgl-3d-track {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
.tgl-3d, .tgl-3d *, .tgl-3d::before, .tgl-3d::after, .tgl-3d *::before, .tgl-3d *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--tgl-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--tgl-size. Every other dimension is inem, so the whole thing scales together. Currently previewing24px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.