Material Radio Button with Ripple
Material Design radios: a ring with a round state layer on hover, a dot that grows in, and an ink ripple that spreads and fades each time an option is chosen.
Also known as: material design radio button css, ripple radio button, android radio button css.
HTML
<div class="rad-material-ripple-radio" role="radiogroup" aria-label="Video quality"> <label><input type="radio" name="rad-material-ripple-radio" value="auto" checked><span class="rad-material-ripple-radio-control" aria-hidden="true"></span>Auto</label> <label><input type="radio" name="rad-material-ripple-radio" value="720"><span class="rad-material-ripple-radio-control" aria-hidden="true"></span>720p</label> <label><input type="radio" name="rad-material-ripple-radio" value="1080"><span class="rad-material-ripple-radio-control" aria-hidden="true"></span>1080p</label> </div>
CSS
.rad-material-ripple-radio {
--c: var(--rad-color, #3b82f6);
font-size: var(--rad-size, 18px);
display: inline-flex;
gap: 0.6em;
font-family: system-ui, sans-serif;
line-height: 1.2;
}
.rad-material-ripple-radio label {
position: relative;
display: inline-flex;
align-items: center;
padding-right: 0.5em;
cursor: pointer;
}
.rad-material-ripple-radio input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.rad-material-ripple-radio-control {
position: relative;
display: grid;
place-items: center;
width: 2.5em;
height: 2.5em;
}
.rad-material-ripple-radio-control::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: currentColor;
opacity: 0;
transition: opacity 0.2s ease;
}
.rad-material-ripple-radio-control::after {
content: "";
box-sizing: border-box;
width: 1.25em;
height: 1.25em;
border: 0.13em solid color-mix(in srgb, currentColor 60%, transparent);
border-radius: 50%;
background: radial-gradient(circle closest-side, var(--c) 92%, transparent) center / 0 0 no-repeat;
transition: border-color 0.2s ease, background-size 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rad-material-ripple-radio label:hover .rad-material-ripple-radio-control::before {
opacity: 0.08;
}
.rad-material-ripple-radio input:checked + .rad-material-ripple-radio-control::before {
background: var(--c);
animation: rad-material-ripple-radio-ripple 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.rad-material-ripple-radio input:checked + .rad-material-ripple-radio-control::after {
border-color: var(--c);
background-size: 0.55em 0.55em;
}
.rad-material-ripple-radio input:focus-visible + .rad-material-ripple-radio-control::before {
background: var(--c);
opacity: 0.18;
}
@keyframes rad-material-ripple-radio-ripple {
0% { opacity: 0.35; transform: scale(0.3); }
100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.rad-material-ripple-radio, .rad-material-ripple-radio *, .rad-material-ripple-radio::before, .rad-material-ripple-radio::after, .rad-material-ripple-radio *::before, .rad-material-ripple-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.