AIMRAN
HTML + CSSCheckboxes

Ripple checkbox

When you tick it, a ring of colour spreads out around the box and fades, like a drop in water.

Settings

16px
1x

Code

<label class="uv-ck2r"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg><em></em></span>Notifications</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

Self-drawing checkbox

CheckboxesHTML + CSS

Round fill checkbox

CheckboxesHTML + CSS

Confetti burst checkbox

CheckboxesHTML + CSS

Strikethrough task item

CheckboxesHTML + CSS

3D flip checkbox

CheckboxesHTML + CSS

Heart like button

CheckboxesHTML + CSS

Bouncy drawn checkbox

CheckboxesHTML + CSS

Circle fill checkbox

CheckboxesHTML + CSS

Where to use it

A ripple is a good fit for settings screens where every row is a checkbox: notification preferences in an account page, “Email me about new orders” in a shop admin or the alerts of a banking app. The spreading ring shows which row you just changed. A ripple checkbox in HTML and CSS.

The ripple fades on its own and does not repeat, so it does not bother anyone on long lists. If your rows are packed tightly, give them a little extra spacing so the ring has room to breathe.