Bouncing Ball Toggle
The knob is a beach ball that squashes, jumps across in an arc and lands with a squash and a little rebound, its shadow shrinking under it. Switching off, it rolls back along the track.
Also known as: bouncy toggle switch, jumping knob toggle, beach ball switch css.
HTML
<label class="tgl-bouncing-ball-toggle">
<input type="checkbox" role="switch" aria-label="Bounce">
<span class="tgl-bouncing-ball-toggle-track" aria-hidden="true">
<span class="tgl-bouncing-ball-toggle-shadow"></span>
<span class="tgl-bouncing-ball-toggle-ball"></span>
</span>
</label>CSS
.tgl-bouncing-ball-toggle {
--c: var(--tgl-color, #3b82f6);
font-size: var(--tgl-size, 24px);
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.tgl-bouncing-ball-toggle input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tgl-bouncing-ball-toggle-track {
position: relative;
display: block;
width: 6em;
height: 2.4em;
border-radius: 1.2em;
background: color-mix(in srgb, currentColor 14%, transparent);
transition: background-color 0.4s ease;
}
.tgl-bouncing-ball-toggle-shadow {
position: absolute;
left: 0.45em;
bottom: 0.2em;
width: 1.5em;
height: 0.35em;
border-radius: 50%;
background: rgba(0, 0, 0, 0.28);
transition: transform 0.7s cubic-bezier(0.45, 0, 0.25, 1);
}
/* the ball squashes from its base; the painted ball inside rolls around its center */
.tgl-bouncing-ball-toggle-ball {
position: absolute;
top: 0.3em;
left: 0.3em;
width: 1.8em;
height: 1.8em;
transform-origin: 50% 100%;
transition: transform 0.7s cubic-bezier(0.45, 0, 0.25, 1);
}
.tgl-bouncing-ball-toggle-ball::before,
.tgl-bouncing-ball-toggle-ball::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
}
.tgl-bouncing-ball-toggle-ball::before {
background:
radial-gradient(circle, #fff 0 0.17em, transparent 0.19em),
conic-gradient(from 15deg, var(--c) 0 60deg, #fff 0 120deg, #facc15 0 180deg, #fff 0 240deg, #ef4444 0 300deg, #fff 0);
transform: rotate(-360deg);
transition: transform 0.7s cubic-bezier(0.45, 0, 0.25, 1);
}
.tgl-bouncing-ball-toggle-ball::after {
background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.8) 0 0.12em, rgba(255, 255, 255, 0) 0.55em);
box-shadow: inset -0.15em -0.2em 0.3em rgba(0, 0, 0, 0.25), 0 0.06em 0.12em rgba(0, 0, 0, 0.25);
}
.tgl-bouncing-ball-toggle input:checked + .tgl-bouncing-ball-toggle-track { background: color-mix(in srgb, var(--c) 30%, transparent); }
.tgl-bouncing-ball-toggle input:checked + .tgl-bouncing-ball-toggle-track .tgl-bouncing-ball-toggle-ball {
transform: translateX(3.6em);
transition: none;
animation: tgl-bouncing-ball-toggle-hop 0.8s both;
}
.tgl-bouncing-ball-toggle input:checked + .tgl-bouncing-ball-toggle-track .tgl-bouncing-ball-toggle-ball::before { transform: rotate(0deg); }
.tgl-bouncing-ball-toggle input:checked + .tgl-bouncing-ball-toggle-track .tgl-bouncing-ball-toggle-shadow {
transform: translateX(3.6em);
transition: none;
animation: tgl-bouncing-ball-toggle-shade 0.8s both;
}
@keyframes tgl-bouncing-ball-toggle-hop {
0% { transform: translate(0, 0) scale(1, 1); animation-timing-function: ease-out; }
12% { transform: translate(0, 0) scale(1.18, 0.82); animation-timing-function: ease-out; }
25% { transform: translate(0.55em, -0.9em) scale(0.9, 1.12); animation-timing-function: ease-out; }
50% { transform: translate(1.8em, -1.5em) scale(1, 1); animation-timing-function: ease-in; }
80% { transform: translate(3.25em, -0.45em) scale(0.92, 1.1); animation-timing-function: ease-in; }
88% { transform: translate(3.6em, 0) scale(1.22, 0.78); animation-timing-function: ease-out; }
95% { transform: translate(3.6em, -0.12em) scale(0.96, 1.04); animation-timing-function: ease-in; }
100% { transform: translate(3.6em, 0) scale(1, 1); }
}
@keyframes tgl-bouncing-ball-toggle-shade {
0%, 12% { transform: translateX(0) scale(1); opacity: 1; }
50% { transform: translateX(1.8em) scale(0.5); opacity: 0.4; }
88% { transform: translateX(3.6em) scale(1.15); opacity: 1; }
100% { transform: translateX(3.6em) scale(1); opacity: 1; }
}
.tgl-bouncing-ball-toggle input:focus-visible + .tgl-bouncing-ball-toggle-track {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
.tgl-bouncing-ball-toggle, .tgl-bouncing-ball-toggle *, .tgl-bouncing-ball-toggle::before, .tgl-bouncing-ball-toggle::after, .tgl-bouncing-ball-toggle *::before, .tgl-bouncing-ball-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.