Concentric Pulse
Classic outer ring with inner dot — on check the dot bursts outward then settles into place. The benchmark every radio is measured against.
Concentric Pulse the 1st of 18 designs in the 18 CSS Radio Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<fieldset class="crb-pulse"> <legend class="crb-sr">Plan</legend> <label><input type="radio" name="crb-pulse" checked /><span></span>Starter</label> <label><input type="radio" name="crb-pulse" /><span></span>Pro</label> <label><input type="radio" name="crb-pulse" /><span></span>Team</label> </fieldset>
.crb-pulse { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-pulse label {
display: flex; align-items: center; gap: 10px;
font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-pulse input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-pulse span {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid #444461; background: transparent;
position: relative; transition: border-color 0.2s;
}
.crb-pulse span::after {
content: ''; position: absolute; inset: 3px;
border-radius: 50%; background: #7c6cff;
transform: scale(0); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.crb-pulse input:checked + span { border-color: #7c6cff; }
.crb-pulse input:checked + span::after { transform: scale(1); animation: crb-pulse-burst 0.5s ease-out; }
@keyframes crb-pulse-burst {
0% { box-shadow: 0 0 0 0 rgba(124,108,255,0.6); }
100% { box-shadow: 0 0 0 12px rgba(124,108,255,0); }
}
@media (prefers-reduced-motion: reduce) {
.crb-pulse,
.crb-pulse * {
animation: none !important;
}
}
.crb-sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
More from 18 CSS Radio Button Designs
Pill SliderMagnetic OrbInk DropStar BurstTilt CardMinimal TickColor SwatchesSegmented BarNeon RingPricing TierWave FillClip Mask
View the full collection →