Cat Toggle Switch
A sleepy cat for a knob: off, its eyes are shut, its ears droop and little z's float up; switch it on and it slides over, perks its ears and opens its eyes. Head, ears and face are plain spans.
Also known as: cute cat toggle css, sleeping cat switch, animal toggle switch.
HTML
<label class="tgl-cat-toggle">
<input type="checkbox" role="switch" aria-label="Awake">
<span class="tgl-cat-toggle-track" aria-hidden="true">
<span class="tgl-cat-toggle-zzz"></span>
<span class="tgl-cat-toggle-cat">
<span class="tgl-cat-toggle-ears"></span>
<span class="tgl-cat-toggle-eyes"></span>
<span class="tgl-cat-toggle-whiskers"></span>
<span class="tgl-cat-toggle-nose"></span>
</span>
</span>
</label>CSS
.tgl-cat-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-cat-toggle input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tgl-cat-toggle-track {
position: relative;
display: block;
width: 6em;
height: 2.6em;
border-radius: 1.3em;
background: color-mix(in srgb, var(--c) 25%, #1e293b);
transition: background-color 0.4s ease;
}
.tgl-cat-toggle-cat {
position: absolute;
top: 0.35em;
left: 0.3em;
z-index: 0;
width: 2em;
height: 1.9em;
transition: transform 0.55s cubic-bezier(0.5, 1.4, 0.4, 1);
}
.tgl-cat-toggle-cat::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50% 50% 46% 46%;
background: radial-gradient(ellipse 0.8em 0.5em at 50% 80%, #fed7aa 98%, transparent), #fb923c;
box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.3);
}
.tgl-cat-toggle-cat > span { position: absolute; }
/* ears sit behind the head */
.tgl-cat-toggle-ears {
inset: 0;
z-index: -1;
}
.tgl-cat-toggle-ears::before,
.tgl-cat-toggle-ears::after {
content: "";
position: absolute;
top: -0.32em;
width: 0.8em;
height: 0.9em;
clip-path: polygon(0 100%, 35% 0, 100% 100%);
background: linear-gradient(#ea580c, #fb923c);
transform-origin: 50% 100%;
transition: transform 0.35s cubic-bezier(0.4, 1.8, 0.5, 1);
}
.tgl-cat-toggle-ears::before { left: 0.05em; transform: rotate(-38deg); }
.tgl-cat-toggle-ears::after { right: 0.05em; transform: scaleX(-1) rotate(-38deg); }
.tgl-cat-toggle-eyes {
top: 0.72em;
left: 0.48em;
right: 0.48em;
height: 0.34em;
}
.tgl-cat-toggle-eyes::before,
.tgl-cat-toggle-eyes::after {
content: "";
position: absolute;
top: 0;
width: 0.3em;
height: 0.34em;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff 0 0.05em, #1f2937 0.06em);
transform: scaleY(0.15);
transition: transform 0.25s ease;
}
.tgl-cat-toggle-eyes::after { right: 0; }
.tgl-cat-toggle-nose {
left: calc(50% - 0.12em);
top: 1.12em;
width: 0.24em;
height: 0.16em;
background: #f472b6;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tgl-cat-toggle-whiskers {
top: 1.2em;
left: -0.18em;
right: -0.18em;
}
.tgl-cat-toggle-whiskers::before,
.tgl-cat-toggle-whiskers::after {
content: "";
position: absolute;
top: 0;
width: 0.45em;
height: 0.05em;
background: #7c2d12;
box-shadow: 0 0.16em 0 #7c2d12;
}
.tgl-cat-toggle-whiskers::before { left: 0; }
.tgl-cat-toggle-whiskers::after { right: 0; }
.tgl-cat-toggle-zzz {
position: absolute;
top: -0.2em;
left: 2.1em;
font: 700 0.6em/1 system-ui, sans-serif;
color: currentColor;
transition: opacity 0.2s ease;
}
.tgl-cat-toggle-zzz::before,
.tgl-cat-toggle-zzz::after {
content: "z";
position: absolute;
top: 0;
left: 0;
animation: tgl-cat-toggle-float 2.6s ease-out infinite;
}
.tgl-cat-toggle-zzz::after {
content: "Z";
animation-delay: -1.3s;
}
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track { background: var(--c); }
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-cat { transform: translateX(3.4em); }
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-zzz { opacity: 0; }
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-eyes::before,
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-eyes::after {
transform: scaleY(1);
transition-delay: 0.3s;
}
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-ears::before {
transform: rotate(-6deg);
transition-delay: 0.25s;
}
.tgl-cat-toggle input:checked + .tgl-cat-toggle-track .tgl-cat-toggle-ears::after {
transform: scaleX(-1) rotate(-6deg);
transition-delay: 0.3s;
}
@keyframes tgl-cat-toggle-float {
0% { transform: translate(0, 0.6em) scale(0.5); opacity: 0; }
30% { opacity: 1; }
100% { transform: translate(1.2em, -1.6em) scale(1.1); opacity: 0; }
}
.tgl-cat-toggle input:focus-visible + .tgl-cat-toggle-track {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
.tgl-cat-toggle, .tgl-cat-toggle *, .tgl-cat-toggle::before, .tgl-cat-toggle::after, .tgl-cat-toggle *::before, .tgl-cat-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.