Croix qui devient coche
Les deux barres d'une croix rouge glissent et se redimensionnent pour former une coche verte en cochant.
Réglages
Code
<label class="uv-cxm"><input type="checkbox"><span class="bx"><i class="a"></i><i class="b"></i></span>Je participerai à l’événement</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
Voir tout : Cases à cocherOù l’utiliser
Une case qui montre les deux réponses à la fois fonctionne bien pour les questions oui ou non, comme participer à un événement, accepter une invitation ou marquer un article comme disponible. Décochée, elle affiche une croix rouge douce ; cochée, les deux mêmes barres bougent, rétrécissent et pivotent en coche tandis que le fond se remplit de vert.
Les deux couleurs se modifient, pour des tons de marque ou un gris et un bleu neutres. Chaque barre utilise une transition à ressort, le passage reste fluide dans les deux sens sans keyframes.