Thumbs Up Down Toggle
A like or dislike switch whose knob turns as it travels: the thumb points down on a red track, then rolls half a turn to point up on the accent. One rotate and one translate on the knob.
Also known as: like dislike toggle, thumbs up toggle switch, vote toggle css.
HTML
<label class="tgl-thumbs-toggle">
<input type="checkbox" role="switch" aria-label="Thumbs up">
<span class="tgl-thumbs-toggle-track" aria-hidden="true">
<span class="tgl-thumbs-toggle-knob">
<svg viewBox="0 0 24 24"><path d="M3 11.2A1.2 1.2 0 0 1 4.2 10H7v10H4.2A1.2 1.2 0 0 1 3 18.8zM9 10.2l3.6-6.4c.4-.7 1.3-.9 2-.5 1 .6 1.4 1.8 1.1 2.9L15 9.5h4.3c1.3 0 2.2 1.2 1.9 2.4l-1.6 6.6c-.2.9-1 1.5-1.9 1.5H9z"/></svg>
</span>
</span>
</label>CSS
.tgl-thumbs-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-thumbs-toggle input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tgl-thumbs-toggle-track {
position: relative;
display: block;
width: 5.6em;
height: 2.6em;
border-radius: 1.3em;
background: #f87171;
transition: background-color 0.4s ease;
}
.tgl-thumbs-toggle-knob {
position: absolute;
top: 0.3em;
left: 0.3em;
display: grid;
place-items: center;
width: 2em;
height: 2em;
border-radius: 50%;
background: #fff;
color: #ef4444;
box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
transform: rotate(180deg);
transition: transform 0.55s cubic-bezier(0.5, 1.4, 0.4, 1), color 0.3s ease;
}
.tgl-thumbs-toggle-knob svg {
display: block;
width: 1.15em;
height: 1.15em;
fill: currentColor;
}
.tgl-thumbs-toggle input:checked + .tgl-thumbs-toggle-track { background: var(--c); }
.tgl-thumbs-toggle input:checked + .tgl-thumbs-toggle-track .tgl-thumbs-toggle-knob {
transform: translateX(3em) rotate(360deg);
color: var(--c);
}
.tgl-thumbs-toggle:active .tgl-thumbs-toggle-knob svg { transform: scale(0.85); }
.tgl-thumbs-toggle input:focus-visible + .tgl-thumbs-toggle-track {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
.tgl-thumbs-toggle, .tgl-thumbs-toggle *, .tgl-thumbs-toggle::before, .tgl-thumbs-toggle::after, .tgl-thumbs-toggle *::before, .tgl-thumbs-toggle *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<label class="relative inline-flex cursor-pointer">
<input type="checkbox" role="switch" aria-label="Thumbs up" class="peer sr-only">
<span aria-hidden="true" class="block h-[2.6rem] w-[5.6rem] rounded-full bg-red-400 transition-colors duration-500 peer-checked:bg-blue-500 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-blue-500"></span>
<span aria-hidden="true" class="pointer-events-none absolute left-[0.3rem] top-[0.3rem] grid h-8 w-8 rotate-180 place-items-center rounded-full bg-white text-red-500 shadow transition duration-500 ease-[cubic-bezier(.5,1.4,.4,1)] peer-checked:translate-x-12 peer-checked:rotate-[360deg] peer-checked:text-blue-500">
<svg viewBox="0 0 24 24" class="h-[1.15rem] w-[1.15rem] fill-current"><path d="M3 11.2A1.2 1.2 0 0 1 4.2 10H7v10H4.2A1.2 1.2 0 0 1 3 18.8zM9 10.2l3.6-6.4c.4-.7 1.3-.9 2-.5 1 .6 1.4 1.8 1.1 2.9L15 9.5h4.3c1.3 0 2.2 1.2 1.9 2.4l-1.6 6.6c-.2.9-1 1.5-1.9 1.5H9z"/></svg>
</span>
</label>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.