Haptic Squish Toggle Switch
A switch that feels haptic. Hold it and the knob squishes flat, release and it lands with a squash against the far wall, the track gives a tiny thud and one ring of light pulses out.
Also known as: haptic toggle switch, squishy toggle switch css, satisfying toggle switch, jelly knob switch.
HTML
<label class="tgl-haptic-squish-toggle"> <input type="checkbox" role="switch" aria-label="Haptics"> <span class="tgl-haptic-squish-toggle-track" aria-hidden="true"><span class="tgl-haptic-squish-toggle-knob"></span></span> </label>
CSS
.tgl-haptic-squish-toggle {
--c: var(--tgl-color, #3b82f6);
font-size: var(--tgl-size, 24px);
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-family: system-ui, sans-serif;
line-height: 1.2;
}
.tgl-haptic-squish-toggle input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tgl-haptic-squish-toggle-track {
position: relative;
display: block;
width: 3.8em;
height: 2.1em;
border-radius: 99em;
background: color-mix(in srgb, currentColor 14%, transparent);
transition: background-color 0.25s ease;
}
.tgl-haptic-squish-toggle-knob {
position: absolute;
top: 0.2em;
left: 0.2em;
width: 1.7em;
height: 1.7em;
border-radius: 99em;
background: #fff;
box-shadow: 0 0.12em 0.3em rgb(0 0 0 / 0.25), inset 0 -0.08em 0.12em rgb(0 0 0 / 0.06);
transform-origin: left center;
translate: 0 0;
transition: translate 0.3s cubic-bezier(0.55, 0, 0.25, 1), scale 0.18s ease;
}
.tgl-haptic-squish-toggle-knob::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0;
}
/* held: the knob squishes flat and wide */
.tgl-haptic-squish-toggle:active .tgl-haptic-squish-toggle-knob {
scale: 1.18 0.86;
}
.tgl-haptic-squish-toggle input:checked + .tgl-haptic-squish-toggle-track {
background: var(--c);
animation: tgl-haptic-squish-toggle-thud-on 0.35s ease-out 0.26s;
}
.tgl-haptic-squish-toggle input:checked + .tgl-haptic-squish-toggle-track .tgl-haptic-squish-toggle-knob {
transform-origin: right center;
translate: 1.7em 0;
animation: tgl-haptic-squish-toggle-land-on 0.5s cubic-bezier(0.3, 0.7, 0.4, 1) 0.26s;
}
.tgl-haptic-squish-toggle input:checked + .tgl-haptic-squish-toggle-track .tgl-haptic-squish-toggle-knob::after {
animation: tgl-haptic-squish-toggle-ring 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.28s;
}
.tgl-haptic-squish-toggle input:not(:checked) + .tgl-haptic-squish-toggle-track .tgl-haptic-squish-toggle-knob {
animation: tgl-haptic-squish-toggle-land-off 0.5s cubic-bezier(0.3, 0.7, 0.4, 1) 0.26s;
}
.tgl-haptic-squish-toggle input:focus-visible + .tgl-haptic-squish-toggle-track {
outline: 0.12em solid var(--c);
outline-offset: 0.2em;
}
@keyframes tgl-haptic-squish-toggle-land-on {
0% { transform: none; }
30% { transform: scale(0.8, 1.12); }
65% { transform: scale(1.05, 0.97); }
100% { transform: none; }
}
@keyframes tgl-haptic-squish-toggle-land-off {
0% { transform: none; }
30% { transform: scale(0.84, 1.1); }
65% { transform: scale(1.04, 0.98); }
100% { transform: none; }
}
@keyframes tgl-haptic-squish-toggle-thud-on {
0% { transform: none; }
30% { transform: translateX(0.07em) scale(0.985); }
60% { transform: translateX(-0.03em); }
100% { transform: none; }
}
@keyframes tgl-haptic-squish-toggle-ring {
from { opacity: 1; box-shadow: 0 0 0 0 rgb(255 255 255 / 0.7); }
to { opacity: 1; box-shadow: 0 0 0 0.7em rgb(255 255 255 / 0); }
}
@media (prefers-reduced-motion: reduce) {
.tgl-haptic-squish-toggle *,
.tgl-haptic-squish-toggle *::before,
.tgl-haptic-squish-toggle *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.tgl-haptic-squish-toggle, .tgl-haptic-squish-toggle *, .tgl-haptic-squish-toggle::before, .tgl-haptic-squish-toggle::after, .tgl-haptic-squish-toggle *::before, .tgl-haptic-squish-toggle *::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.