AIMRAN
HTML + CSSRadio buttons

Bouncing dot radio

The inner dot pops out from the centre with a little bounce when you pick an option.

Settings

16px
1x

Code

<div class="uv-rdd"><label><input type="radio" name="rdd" checked><span class="rb"><i></i></span>Daily</label><label><input type="radio" name="rdd"><span class="rb"><i></i></span>Weekly</label><label><input type="radio" name="rdd"><span class="rb"><i></i></span>Monthly</label></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Radio buttons

Drawn ring radio

Radio buttonsHTML + CSS

Sliding pill selector

Radio buttonsHTML + CSS

Radio cards with icons

Radio buttonsHTML + CSS

Jumping dot radio

Radio buttonsHTML + CSS

Liquid fill radio

Radio buttonsHTML + CSS

Vertical tabs with light bar

Radio buttonsHTML + CSS

Pricing plan selector

Radio buttonsHTML + CSS

Star rating with label

Radio buttonsHTML + CSS

Where to use it

A classic radio button with a bit more life, good for simple either-or choices: how often a newsletter should arrive, daily, weekly or monthly, or how often a fitness app sends reminders. The dot springs into place, so the new choice is obvious. An animated radio button in CSS that still looks familiar to everyone.

Since it stays close to a standard radio, it is a safe pick for long forms and settings pages. Stack the options vertically, as in the demo, when the labels have different lengths.