AIMRAN
HTML + CSSRadio buttons

Liquid fill radio

Colour rises inside the circle like water, and its wavy surface keeps turning gently.

Settings

16px
1x

Code

<div class="uv-rdl"><label><input type="radio" name="rdl" checked><span class="rb"><i></i></span>Water</label><label><input type="radio" name="rdl"><span class="rb"><i></i></span>Juice</label><label><input type="radio" name="rdl"><span class="rb"><i></i></span>Coffee</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

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

Jumping dot 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 radio that fills up like a glass is a natural match for anything you drink or pour: choosing water, juice or coffee in a café ordering app, the milk for a latte or the size of a smoothie. It also fits a water tracker app. A liquid radio button in CSS with a two-colour gradient.

The wave keeps moving while an option is selected, so use it where there are only a few choices on screen. Pick two shades of the same colour for the gradient; it looks more like real liquid that way.