Case à cocher avec étincelles
Huit petites étincelles jaillissent de la case dès qu’on la coche, comme une mini célébration.
Réglages
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>J’aime</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
Les étincelles ont du sens quand cocher est une petite victoire ou un geste d’affection : le « J’aime » d’une recette, un produit ajouté à la liste d’envies ou l’habitude du jour validée dans une application de suivi. Cette petite explosion récompense le clic et donne envie de recommencer. Une case à cocher avec animation de particules en HTML et CSS.
Évitez-la dans les formulaires sérieux. Personne ne veut de confettis en acceptant une politique de confidentialité ou en choisissant une assurance. Les étincelles prennent la couleur d’accent et restent donc lisibles sur fond sombre.