Pulse Dot Radio

A pulse dot radio button built with pure HTML and CSS that animates the selected state using a subtle pulsing dot effect. It enhances selection feedback and visual interaction clarity without requiring JavaScript.

Usage

Use this component when interfaces require animated radio selection feedback, such as surveys, settings panels, feature options, or preference selectors that benefit from noticeable state changes.

Implementation

The effect is implemented using CSS :checked selectors combined with keyframe based pulse animations, allowing the inner selection dot to animate smoothly when activated.

HTML

<label class="radio-pulse">
  <input type="radio" name="opt">
  <span class="radio-pulse__dot"></span>
</label>

<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;
  }
}

.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

• Built with pure HTML and CSS
• No JavaScript required
• Uses pulse style keyframe animation
• Enhances radio selection visibility
• Fully responsive across breakpoints
• Suitable for forms and option selectors
• Easy to customize pulse size and color

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.