Emoji Rating Radio Buttons
Five emoji faces from angry to delighted. Unpicked faces sit small and grayscale; the chosen one colors in, grows, bounces and shows its word below. Good for quick feedback forms.
Also known as: emoji rating css, smiley rating css, emoji feedback radio buttons.
HTML
<div class="rad-emoji-rating" role="radiogroup" aria-label="How was it?"> <label><input type="radio" name="rad-emoji-rating" value="1"><span class="rad-emoji-rating-face" aria-hidden="true">😠</span><span class="rad-emoji-rating-word">Awful</span></label> <label><input type="radio" name="rad-emoji-rating" value="2"><span class="rad-emoji-rating-face" aria-hidden="true">😕</span><span class="rad-emoji-rating-word">Meh</span></label> <label><input type="radio" name="rad-emoji-rating" value="3"><span class="rad-emoji-rating-face" aria-hidden="true">😐</span><span class="rad-emoji-rating-word">Okay</span></label> <label><input type="radio" name="rad-emoji-rating" value="4" checked><span class="rad-emoji-rating-face" aria-hidden="true">🙂</span><span class="rad-emoji-rating-word">Good</span></label> <label><input type="radio" name="rad-emoji-rating" value="5"><span class="rad-emoji-rating-face" aria-hidden="true">😍</span><span class="rad-emoji-rating-word">Love it</span></label> </div>
CSS
.rad-emoji-rating {
--c: var(--rad-color, #3b82f6);
font-size: var(--rad-size, 18px);
display: inline-flex;
gap: 0.35em;
padding-bottom: 1.3em;
font-family: system-ui, sans-serif;
line-height: 1.2;
}
.rad-emoji-rating label {
position: relative;
cursor: pointer;
}
.rad-emoji-rating input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.rad-emoji-rating-face {
display: block;
padding: 0.12em;
font: 1.9em/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
filter: grayscale(1);
opacity: 0.5;
transform: scale(0.82);
transition: filter 0.3s ease, opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rad-emoji-rating label:hover .rad-emoji-rating-face {
filter: grayscale(0.2);
opacity: 0.9;
transform: scale(0.95);
}
.rad-emoji-rating input:checked + .rad-emoji-rating-face {
filter: none;
opacity: 1;
transform: scale(1.15);
animation: rad-emoji-rating-bounce 0.6s ease-out;
}
.rad-emoji-rating-word {
position: absolute;
top: 100%;
left: 50%;
margin-top: 0.35em;
font-size: 0.72em;
font-weight: 600;
white-space: nowrap;
color: var(--c);
opacity: 0;
transform: translate(-50%, -0.4em);
transition: opacity 0.2s ease, transform 0.3s ease;
}
.rad-emoji-rating input:checked ~ .rad-emoji-rating-word {
opacity: 1;
transform: translate(-50%, 0);
}
.rad-emoji-rating input:focus-visible + .rad-emoji-rating-face {
outline: 0.06em solid var(--c);
outline-offset: 0.02em;
border-radius: 50%;
}
@keyframes rad-emoji-rating-bounce {
0% { translate: 0 0; }
30% { translate: 0 -0.22em; }
55% { translate: 0 0; }
75% { translate: 0 -0.07em; }
100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.rad-emoji-rating, .rad-emoji-rating *, .rad-emoji-rating::before, .rad-emoji-rating::after, .rad-emoji-rating *::before, .rad-emoji-rating *::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.