Emoji Toggle Switch
The knob is a face: off it frowns, with worried brows and a tear rolling down; on it slides over, the frown flips into a smile and rosy cheeks fade in. It blinks every few seconds.
Also known as: smiley face toggle, happy sad toggle switch, emoji switch css.
HTML
<label class="tgl-emoji-toggle">
<input type="checkbox" role="switch" aria-label="Happy mode">
<span class="tgl-emoji-toggle-track" aria-hidden="true">
<span class="tgl-emoji-toggle-face">
<span class="tgl-emoji-toggle-brows"></span>
<span class="tgl-emoji-toggle-eyes"></span>
<span class="tgl-emoji-toggle-cheeks"></span>
<span class="tgl-emoji-toggle-mouth"></span>
<span class="tgl-emoji-toggle-tear"></span>
</span>
</span>
</label>CSS
.tgl-emoji-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-emoji-toggle input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tgl-emoji-toggle-track {
position: relative;
display: block;
width: 5.6em;
height: 2.6em;
border-radius: 1.3em;
background: color-mix(in srgb, currentColor 14%, transparent);
transition: background-color 0.35s ease;
}
.tgl-emoji-toggle-face {
position: absolute;
top: 0.3em;
left: 0.3em;
width: 2em;
height: 2em;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fef08a, #facc15 60%, #eab308);
box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25), inset 0 -0.1em 0.15em rgba(161, 98, 7, 0.35);
transition: transform 0.5s cubic-bezier(0.5, 1.3, 0.4, 1);
}
.tgl-emoji-toggle-face > span { position: absolute; }
.tgl-emoji-toggle-eyes,
.tgl-emoji-toggle-brows,
.tgl-emoji-toggle-cheeks {
left: 0.5em;
right: 0.5em;
}
.tgl-emoji-toggle-eyes::before,
.tgl-emoji-toggle-eyes::after,
.tgl-emoji-toggle-brows::before,
.tgl-emoji-toggle-brows::after,
.tgl-emoji-toggle-cheeks::before,
.tgl-emoji-toggle-cheeks::after {
content: "";
position: absolute;
top: 0;
}
.tgl-emoji-toggle-eyes::after,
.tgl-emoji-toggle-brows::after,
.tgl-emoji-toggle-cheeks::after { right: 0; }
.tgl-emoji-toggle-eyes { top: 0.66em; }
.tgl-emoji-toggle-eyes::before,
.tgl-emoji-toggle-eyes::after {
width: 0.22em;
height: 0.3em;
border-radius: 50%;
background: #713f12;
animation: tgl-emoji-toggle-blink 4s infinite;
}
.tgl-emoji-toggle-brows { top: 0.46em; }
.tgl-emoji-toggle-brows::before,
.tgl-emoji-toggle-brows::after {
width: 0.34em;
height: 0.08em;
border-radius: 0.04em;
background: #713f12;
transition: transform 0.4s ease, opacity 0.3s ease;
}
.tgl-emoji-toggle-brows::before { left: -0.06em; transform: rotate(-22deg); }
.tgl-emoji-toggle-brows::after { right: -0.06em; transform: rotate(22deg); }
.tgl-emoji-toggle-cheeks { top: 1.08em; left: 0.28em; right: 0.28em; }
.tgl-emoji-toggle-cheeks::before,
.tgl-emoji-toggle-cheeks::after {
width: 0.34em;
height: 0.2em;
border-radius: 50%;
background: #fb7185;
opacity: 0;
transition: opacity 0.3s ease;
}
.tgl-emoji-toggle-mouth {
left: calc(50% - 0.43em);
top: 1.02em;
width: 0.86em;
height: 0.44em;
box-sizing: border-box;
border: 0.1em solid transparent;
border-bottom-color: #713f12;
border-radius: 0 0 0.8em 0.8em / 0 0 0.55em 0.55em;
transform: translateY(0.3em) scale(0.7, -0.6);
transition: transform 0.4s cubic-bezier(0.5, 1.6, 0.4, 1);
}
.tgl-emoji-toggle-tear {
top: 0.95em;
left: 0.52em;
width: 0.16em;
height: 0.24em;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background: #38bdf8;
animation: tgl-emoji-toggle-drip 1.8s ease-in infinite;
}
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track { background: var(--c); }
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-face { transform: translateX(3em); }
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-mouth { transform: none; }
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-brows::before,
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-brows::after {
opacity: 0;
transform: translateY(-0.1em);
}
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-cheeks::before,
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-cheeks::after { opacity: 0.7; }
.tgl-emoji-toggle input:checked + .tgl-emoji-toggle-track .tgl-emoji-toggle-tear {
opacity: 0;
animation: none;
}
@keyframes tgl-emoji-toggle-blink {
0%, 92%, 100% { transform: scaleY(1); }
96% { transform: scaleY(0.1); }
}
@keyframes tgl-emoji-toggle-drip {
0% { transform: translateY(0) scale(0.4); opacity: 0; }
20% { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(0.6em); opacity: 0; }
}
.tgl-emoji-toggle input:focus-visible + .tgl-emoji-toggle-track {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
.tgl-emoji-toggle, .tgl-emoji-toggle *, .tgl-emoji-toggle::before, .tgl-emoji-toggle::after, .tgl-emoji-toggle *::before, .tgl-emoji-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.