AIMRAN
HTML + CSSRadio buttons

Sliding pill selector

A coloured pill glides behind the options and stretches to fit whichever one you click.

Settings

16px
1x

Code

<div class="uv-rds"><span class="p"></span><button class="on">Monthly</button><button>Yearly</button><button>Lifetime</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

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

This is the switch you see on almost every pricing page: monthly, yearly or lifetime billing. It also works for “Delivery / Pickup” on a restaurant site or map and list views in a property search. The pill slides and resizes itself to each label. A segmented control in HTML and CSS, with a few lines of JavaScript.

Keep it to two, three or at most four short options; beyond that the pill has too far to travel and the labels get cramped. If yearly billing saves money, say it right in the label, like “Yearly −20%”.