AIMRAN
HTML + CSSCheckboxes

Checkbox with particle burst

Eight little sparks fly out from the box the moment you tick it, like a tiny celebration.

Settings

16px
1x

Code

<label class="uv-ck2b"><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><b style="--a:0deg"></b><b style="--a:45deg"></b><b style="--a:90deg"></b><b style="--a:135deg"></b><b style="--a:180deg"></b><b style="--a:225deg"></b><b style="--a:270deg"></b><b style="--a:315deg"></b></em></span>Like</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

Sparks make sense when ticking something is a small win or a sign of affection: the “Like” on a recipe, adding a product to a wishlist or marking today’s habit as done in a tracker app. The burst rewards the click and invites people to do it again. A checkbox with a particle animation, written in HTML and CSS.

Keep it away from serious forms. Nobody wants confetti when agreeing to a privacy policy or choosing an insurance option. The sparks take the accent colour, so they also read well on dark backgrounds.