Water fill checkbox
Water rises in waves inside the box, lets out a couple of bubbles and then shows the tick on top.
Settings
Code
<label class="uvq02-liq"><input type="checkbox"><span class="bx"><i class="w2"></i><i class="w1"></i><i class="bu"></i><i class="bu"></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Drink 2 litres of water</label>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 Checkboxes
See all CheckboxesWhere to use it
This checkbox fills up like a glass. Two rotating wave layers rise from the bottom when it is checked, a pair of bubbles float up, and a white tick appears once the water settles near the top. Hovering raises the level a little as a hint. It is HTML and CSS only and fits habit trackers, hydration reminders, garden apps and wellness checklists.
The main color is the front wave and the secondary color the lighter back wave, so try teal and aqua, amber and honey, or berry tones for juice. The speed slider changes how fast the waves roll and the water climbs.