AIMRAN
HTML + CSSRadio buttons

Jumping dot radio

One shared dot jumps from option to option and stretches like jelly while it travels.

Settings

16px
1x

Code

<div class="uv-rdj"><span class="dt"></span><button class="on"><span class="sl"></span>One</button><button><span class="sl"></span>Two</button><button><span class="sl"></span>Three</button><button><span class="sl"></span>Four</button></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

Bouncing dot radio

Radio buttonsHTML + CSS

Drawn ring radio

Radio buttonsHTML + CSS

Sliding pill selector

Radio buttonsHTML + CSS

Radio cards with icons

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

Instead of each option having its own dot, a single dot travels between them and squashes on the way. That playful motion suits quizzes and short questionnaires: the answers in a trivia game, “How many people are on your team?” during onboarding or a personality test. An animated radio group in HTML, CSS and a little JavaScript.

The stretch is the whole charm, so leave enough gap between options for the jump to be seen. It suits a vertical list of up to five or six answers; in a horizontal row it loses its effect.