Mood Picker Radio Buttons
One cartoon face that reacts to the pick: its mouth bends from frown to flat to smile, its color warms and it gives a little wobble. The mouth is a clipped ellipse whose height animates.
Also known as: mood selector css, smiley face feedback css, how do you feel picker.
HTML
<div class="rad-mood-picker" role="radiogroup" aria-label="How are you feeling?">
<div class="rad-mood-picker-face" aria-hidden="true"><i></i><i></i><b></b></div>
<div class="rad-mood-picker-options">
<label><input type="radio" name="rad-mood-picker" value="bad"><span>Bad</span></label>
<label><input type="radio" name="rad-mood-picker" value="okay" checked><span>Okay</span></label>
<label><input type="radio" name="rad-mood-picker" value="great"><span>Great</span></label>
</div>
</div>CSS
.rad-mood-picker {
--c: var(--rad-color, #3b82f6);
font-size: var(--rad-size, 18px);
--mood: #fbbf24;
--mouth: 0em;
--flip: 1;
--drop: 0em;
--blush: 0;
display: grid;
justify-items: center;
gap: 0.8em;
font-family: system-ui, sans-serif;
line-height: 1.2;
}
.rad-mood-picker:has(label:nth-of-type(1) :checked) {
--mood: #fb7185;
--mouth: 0.45em;
--flip: -1;
--drop: 0.3em;
}
.rad-mood-picker:has(label:nth-of-type(3) :checked) {
--mood: #34d399;
--mouth: 0.6em;
--blush: 1;
}
.rad-mood-picker-face {
position: relative;
width: 3.6em;
height: 3.6em;
border-radius: 50%;
background: var(--mood);
box-shadow: inset 0 -0.25em 0 rgba(0, 0, 0, 0.08);
transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
animation: rad-mood-picker-wobble-b 0.55s ease;
}
.rad-mood-picker:has(label:nth-of-type(1) :checked) .rad-mood-picker-face { animation-name: rad-mood-picker-wobble-a; }
.rad-mood-picker:has(label:nth-of-type(3) :checked) .rad-mood-picker-face { animation-name: rad-mood-picker-wobble-c; }
.rad-mood-picker-face::before,
.rad-mood-picker-face::after {
content: "";
position: absolute;
top: 1.75em;
width: 0.7em;
height: 0.38em;
border-radius: 50%;
background: rgba(225, 29, 72, 0.3);
opacity: var(--blush);
transition: opacity 0.35s ease;
}
.rad-mood-picker-face::before { left: 0.45em; }
.rad-mood-picker-face::after { right: 0.45em; }
.rad-mood-picker-face i {
position: absolute;
top: 1.2em;
width: 0.42em;
height: 0.42em;
border-radius: 50%;
background: #1f2937;
}
.rad-mood-picker-face i:nth-child(1) { left: 0.95em; }
.rad-mood-picker-face i:nth-child(2) { right: 0.95em; }
.rad-mood-picker-face b {
position: absolute;
top: 2em;
left: 50%;
width: 1.5em;
height: var(--mouth);
margin-left: -0.95em;
border: 0.2em solid #1f2937;
border-radius: 50%;
clip-path: inset(50% 0 0 0);
translate: 0 var(--drop);
scale: 1 var(--flip);
transition: height 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), scale 0.4s cubic-bezier(0.65, 0, 0.35, 1), translate 0.4s ease;
}
.rad-mood-picker-options {
display: flex;
gap: 0.4em;
}
.rad-mood-picker label {
position: relative;
cursor: pointer;
}
.rad-mood-picker input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.rad-mood-picker input + span {
display: block;
padding: 0.4em 0.95em;
border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
border-radius: 99em;
font-size: 0.85em;
font-weight: 600;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.rad-mood-picker label:hover input:not(:checked) + span {
border-color: var(--c);
}
.rad-mood-picker input:checked + span {
border-color: var(--c);
background: var(--c);
color: #fff;
}
.rad-mood-picker input:focus-visible + span {
outline: 0.12em solid var(--c);
outline-offset: 0.15em;
}
/* Three identical keyframes: a new name replays the wobble on every change. */
@keyframes rad-mood-picker-wobble-a {
0%, 100% { rotate: 0deg; scale: 1; }
30% { rotate: -8deg; scale: 1.06; }
60% { rotate: 5deg; }
}
@keyframes rad-mood-picker-wobble-b {
0%, 100% { rotate: 0deg; scale: 1; }
30% { rotate: -8deg; scale: 1.06; }
60% { rotate: 5deg; }
}
@keyframes rad-mood-picker-wobble-c {
0%, 100% { rotate: 0deg; scale: 1; }
30% { rotate: -8deg; scale: 1.06; }
60% { rotate: 5deg; }
}
@media (prefers-reduced-motion: reduce) {
.rad-mood-picker, .rad-mood-picker *, .rad-mood-picker::before, .rad-mood-picker::after, .rad-mood-picker *::before, .rad-mood-picker *::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.