HTML + CSSCases à cocher
Case à cocher remplissage circulaire
Un cercle en dégradé grandit depuis le centre jusqu’à remplir la case, puis la coche apparaît.
Réglages
16px
1x
Code
<label class="uv-ck2c"><input type="checkbox"><span class="bx"><i></i><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>Se souvenir de moi</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
Pensez à la case « Se souvenir de moi » sous un formulaire de connexion, ou au « Enregistrer mes informations » d’une page de paiement. Ces petits choix discrets vont bien avec un remplissage qui part du centre : un peu de couleur, de la douceur, rien de tapageur. Si vous cherchez une case à cocher CSS avec dégradé, la voici.
Le dégradé utilise deux couleurs : choisissez-les plutôt proches, comme deux bleus ou un rose et un orange. Des teintes trop opposées donnent vite un résultat terne sur une case aussi petite.