HTML + CSSCases à cocher

Case à cocher avec rebond

La coche se dessine toute seule et la case rebondit légèrement : le clic se sent vraiment.

Réglages

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>J’accepte les conditions</label>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Cases à cocher

Où l’utiliser

C’est la case que l’on doit cocher avant de continuer : le « J’accepte les conditions » d’un formulaire d’inscription, le consentement RGPD sous un formulaire de contact ou la vérification d’âge d’une cave en ligne. Le trait qui se dessine et le petit rebond confirment clairement le clic. Une case à cocher animée en HTML et CSS.

Gardez-la pour une ou deux cases par formulaire, pas pour une liste de vingt options où tous ces rebonds finiraient par fatiguer. Reprenez la couleur de votre bouton principal : le consentement et l’envoi auront l’air d’une seule étape.