Like / Heart Button
Bouton « J'aime » en cœur : au clic, il passe au rouge, bat, lance cinq petits cœurs autour de lui et ajoute 1 au compteur ; un second clic retire le j'aime.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le bouton est un vrai bouton bascule : aria-pressed passe à true au clic, à la touche Entrée ou Espace. Le cœur devient rouge (#ef4444), le fond du bouton rosit et le cœur bat (agrandi à 130 %, puis 90 %, puis 120 %, en 0,6 s). Au même moment, cinq petits cœurs partent vers le haut, chacun dans sa direction, rétrécissent et s'effacent en 0,6 s.
Les éclats sont lancés par la classe lkh-burst, que le script retire puis remet à chaque j'aime : l'éclat rejoue à chaque fois. Retirer son j'aime ne lance pas d'éclat.
Le compteur part du nombre écrit dans .lkh-num (42 dans le HTML d'exemple) : +1 au j'aime, −1 au retrait, jamais sous zéro. L'état de départ se lit dans aria-pressed, ce qui permet d'afficher un j'aime déjà donné. Chaque bascule envoie l'événement fx0742:change (detail.liked, detail.count) depuis la racine : c'est là que vous prévenez votre serveur. Toutes les tailles suivent --lkh-size.
Accessibilité
- Nom et état : le bouton s'appelle « J'aime » (texte masqué à l'écran) et annonce « bouton bascule, activé / désactivé ». Les cœurs dessinés sont masqués aux lecteurs d'écran.
- Total annoncé : le compteur est une zone
aria-live="polite"; après un clic, le lecteur d'écran dit « 43 mentions J'aime ». - Clavier : vrai
<button>, Entrée et Espace, anneau lavande au focus clavier. - Contraste : le cœur éteint est en
#8a8aa3, à 4,2:1 sur le bouton ; le cœur rouge fait environ 4:1 sur le fond rosé. L'état ne repose pas que sur la couleur : il est aussi dit pararia-pressed. - Mouvement réduit : ni battement ni éclats ; le cœur passe au rouge et le compteur change, sans animation.
Compatibilité navigateur
CSS et 1,5 Ko de JavaScript sans dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : code collé deux fois (chaque bouton compte seul), éclats invisibles au chargement puis visibles 120 ms après un clic (opacité 0,66 à 0,74), aucun éclat au retrait, clavier, toucher à 390 px, mouvement réduit, 0 erreur, aucun nom ajouté sur window.
Sans JavaScript, le bouton reste gris et le compteur ne bouge pas. Les éclats utilisent des variables CSS dans @keyframes (Chrome 49, Firefox 31, Safari 9.1) ; l'anneau de focus demande :focus-visible (Chrome 86, Firefox 85, Safari 15.4).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0742-root">
<div class="lkh-demo">
<button type="button" class="lkh-btn" aria-pressed="false">
<span class="lkh-heart" aria-hidden="true">❤</span>
<span class="lkh-particles" aria-hidden="true">
<span class="lkh-particle">❤</span> (× 5)
</span>
<span class="lkh-vh">J'aime</span>
</button>
<span class="lkh-count" aria-live="polite" aria-atomic="true"><span class="lkh-num">42</span><span class="lkh-vh"> mentions J'aime</span></span>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Total de départ (HTML — texte de .lkh-num) |
42 | Écrivez le vrai total venant de votre base ; seuls les chiffres sont lus. |
Déjà aimé (HTML — aria-pressed="true" sur le bouton) |
false |
Affiche un j'aime déjà donné par ce visiteur. |
Nom lu (HTML — texte de .lkh-vh) |
« J'aime » · « mentions J'aime » | Adaptez : « Voter pour ce gâteau », « votes ». |
Taille (CSS — --lkh-size, --lkh-gap) |
60 px · 20 px | Cœur, éclats et distances suivent la taille du bouton. |
Couleurs (CSS — --lkh-btn, --lkh-btn-on, --lkh-off, --lkh-on) |
#2a2a3e · rouge à 10 % · #8a8aa3 · #ef4444 |
Fond du bouton au repos et aimé, cœur éteint et allumé (les éclats prennent la couleur allumée). |
Compteur (CSS — --lkh-count-size, --lkh-count-color) |
1.2rem · blanc | À foncer sur fond clair. |
Cadre (CSS — --lkh-height, --lkh-page, --lkh-panel, --lkh-pad) |
300 px · #0a0a0f · #1a1a2e · 20 px |
0 et transparent pour le poser sous une image ou dans une liste. |
Serveur (JS — événement fx0742:change) |
— | root.addEventListener('fx0742:change', e => fetch('/api/like', { method: 'POST', body: JSON.stringify(e.detail) })). |
FAQ
fx0742:change pour envoyer le j'aime à votre serveur, et écrivez le total à jour dans .lkh-num quand vous générez la page.fill: currentColor à la place du caractère.String(count) par count.toLocaleString('fr-FR') dans le script.
