HTML + CSSCases à cocher
Case à cocher avec onde
En la cochant, un anneau de couleur s’étend autour de la case puis s’efface, comme une goutte dans l’eau.
Réglages
16px
1x
Code
<label class="uv-ck2r"><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></em></span>Notifications</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
L’onde convient aux écrans de réglages où chaque ligne est une case : les préférences de notifications d’un compte, « Me prévenir des nouvelles commandes » dans l’administration d’une boutique ou les alertes d’une application bancaire. L’anneau indique quelle ligne vous venez de modifier. Une case à cocher effet ripple en HTML et CSS.
L’onde disparaît d’elle-même et ne se répète pas : elle ne gêne donc pas dans les longues listes. Si vos lignes sont très serrées, espacez-les un peu pour laisser de la place à l’anneau.