A radio control that confirms selection using a subtle pulse rather than a static fill.
HTML
<label class="radio-pulse">
<input type="radio" name="opt">
<span class="radio-pulse__dot"></span>
</label>CSS
.radio-pulse {
width: 200px;
display: flex;
justify-content: center;
}
.radio-pulse input {
display: none;
}
.radio-pulse__dot {
width: 18px;
height: 18px;
border-radius: 50%;
background: #f3f4f6;
position: relative;
cursor: pointer;
}
.radio-pulse__dot::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
background: #6366f1;
opacity: 0;
}
.radio-pulse input:checked + .radio-pulse__dot::after {
animation: pulse 300ms ease;
opacity: 1;
}
@keyframes pulse {
0% { transform: scale(0.6); }
100% { transform: scale(1); }
}
@media (prefers-color-scheme: dark) {
.radio-pulse__dot {
background: #020617;
}
}Notes
- Pulse-based confirmation
- No heavy animation loops
- Ideal for preference selection
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.