HTML + CSSCases à cocher

Cœur « j'aime »

Un cœur en contour qui se remplit de rouge avec un petit bond quand on le touche, le geste « j'aime » classique.

Réglages

16px
1x

Code

<label class="uv-ch"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.8 4.5c2.1 0 3.6 1.2 5.2 3 1.6-1.8 3.1-3 5.2-3 3.8 0 5.9 3.9 4.4 7.3C19.5 16.4 12 21 12 21z"/></svg>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

Ce cœur est le « j'aime » ou le « garder pour plus tard » universel. Placez-le sur les fiches produits d'une boutique en ligne comme bouton de liste d'envies, à côté des recettes d'un blog de cuisine ou sur les photos d'une galerie de voyage. Le contour se remplit de rouge avec un rebond, comme sur tous les réseaux sociaux.

Il ne garde l'état que sur la page ; pour conserver les favoris d'une visite à l'autre, il faudra les enregistrer de votre côté. Le libellé est facultatif : vous pouvez ne garder que le cœur dans le coin d'une carte.