Thumbs Up Down Radio Buttons
The AI answer feedback pill: thumbs up or down as two icon radios. The pick fills and its thumb tips with a spring, and the question slides away as a thank you note slides in, all with :has().
Also known as: yes no radio button icons, was this helpful css, thumbs up thumbs down feedback css, helpful yes no buttons.
HTML
<div class="rad-thumbs-up-down-radio" role="radiogroup" aria-label="Was this answer helpful?">
<span class="rad-thumbs-up-down-radio-text" aria-hidden="true">
<span class="rad-thumbs-up-down-radio-ask">Was this helpful?</span>
<span class="rad-thumbs-up-down-radio-thanks">Thanks for the feedback</span>
</span>
<label class="rad-thumbs-up-down-radio-up"><input type="radio" name="rad-thumbs-up-down-radio" value="yes" aria-label="Yes, helpful"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10v11"/><path d="M15 5.9L14 10h5.8a2 2 0 0 1 1.9 2.6l-2.3 8a2 2 0 0 1-1.9 1.4H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.8a2 2 0 0 0 1.8-1.1L12 2a3.1 3.1 0 0 1 3 3.9z"/></svg></label>
<label class="rad-thumbs-up-down-radio-down"><input type="radio" name="rad-thumbs-up-down-radio" value="no" aria-label="No, not helpful"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 14V3"/><path d="M9 18.1L10 14H4.2a2 2 0 0 1-1.9-2.6l2.3-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.8a2 2 0 0 0-1.8 1.1L12 22a3.1 3.1 0 0 1-3-3.9z"/></svg></label>
</div>CSS
.rad-thumbs-up-down-radio {
--c: var(--rad-color, #3b82f6);
font-size: var(--rad-size, 18px);
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.3em 0.3em 0.3em 1em;
border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
border-radius: 99em;
background: color-mix(in srgb, currentColor 3%, transparent);
box-shadow: 0 0.4em 1em -0.7em rgb(0 0 0 / 0.25);
font-family: system-ui, sans-serif;
line-height: 1.2;
}
.rad-thumbs-up-down-radio-text {
display: grid;
margin-right: 0.4em;
overflow: hidden;
font-size: 0.88em;
font-weight: 550;
}
.rad-thumbs-up-down-radio-ask,
.rad-thumbs-up-down-radio-thanks {
grid-area: 1 / 1;
white-space: nowrap;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, filter 0.3s ease;
}
.rad-thumbs-up-down-radio-ask {
color: color-mix(in srgb, currentColor 70%, transparent);
}
.rad-thumbs-up-down-radio-thanks {
opacity: 0;
transform: translateY(0.9em);
filter: blur(0.1em);
}
.rad-thumbs-up-down-radio:has(:checked) .rad-thumbs-up-down-radio-ask {
opacity: 0;
transform: translateY(-0.9em);
filter: blur(0.1em);
}
.rad-thumbs-up-down-radio:has(:checked) .rad-thumbs-up-down-radio-thanks {
opacity: 1;
transform: none;
filter: none;
}
.rad-thumbs-up-down-radio label {
position: relative;
display: grid;
place-items: center;
width: 2.2em;
height: 2.2em;
border-radius: 50%;
color: color-mix(in srgb, currentColor 55%, transparent);
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, box-shadow 0.3s ease;
}
.rad-thumbs-up-down-radio-up { --tone: var(--c); }
.rad-thumbs-up-down-radio-down { --tone: #f43f5e; }
.rad-thumbs-up-down-radio input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.rad-thumbs-up-down-radio svg {
width: 1.1em;
height: 1.1em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transform-origin: 30% 70%;
}
.rad-thumbs-up-down-radio label:hover {
background: color-mix(in srgb, currentColor 8%, transparent);
color: currentColor;
}
.rad-thumbs-up-down-radio label:has(:checked) {
background: var(--tone);
color: #fff;
box-shadow: 0 0.3em 0.7em -0.3em var(--tone);
}
.rad-thumbs-up-down-radio:has(:checked) label:not(:has(:checked)) {
opacity: 0.5;
}
.rad-thumbs-up-down-radio-up input:checked + svg {
animation: rad-thumbs-up-down-radio-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rad-thumbs-up-down-radio-down input:checked + svg {
transform-origin: 70% 30%;
animation: rad-thumbs-up-down-radio-down 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rad-thumbs-up-down-radio label:active svg {
transform: scale(0.85);
}
.rad-thumbs-up-down-radio label:has(:focus-visible) {
outline: 0.12em solid var(--tone);
outline-offset: 0.15em;
}
@keyframes rad-thumbs-up-down-radio-up {
0% { transform: scale(0.8); }
45% { transform: scale(1.25) rotate(-18deg) translateY(-0.08em); }
100% { transform: none; }
}
@keyframes rad-thumbs-up-down-radio-down {
0% { transform: scale(0.8); }
45% { transform: scale(1.2) rotate(-14deg) translateY(0.08em); }
100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.rad-thumbs-up-down-radio *,
.rad-thumbs-up-down-radio *::before,
.rad-thumbs-up-down-radio *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.rad-thumbs-up-down-radio, .rad-thumbs-up-down-radio *, .rad-thumbs-up-down-radio::before, .rad-thumbs-up-down-radio::after, .rad-thumbs-up-down-radio *::before, .rad-thumbs-up-down-radio *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--rad-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--rad-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - 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.