HTML + CSSCheckboxes
Bouncy drawn checkbox
The tick draws itself in and the box gives a small bounce, so the click feels properly answered.
Settings
16px
1x
Code
<label class="uv-ck2d"><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></span>I accept the terms</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
Where to use it
This is the checkbox people have to tick before they can carry on: “I accept the terms” on a sign-up form, the privacy consent under a contact form or the age check of an online wine shop. The line drawing itself and the quick bounce make the click feel confirmed. An animated checkbox in plain HTML and CSS.
Use it once or twice per form, not on a list of twenty options, where all that bouncing gets tiring. Set the accent colour to match your main button so the consent and the submit feel like one step.