1.204 aplausos

HTML + CSSMicro-interactions

Bouton d'applaudissements avec compteur

Chaque appui ajoute un applaudissement avec bulle et étincelles ; maintenu, il applaudit en rafale jusqu'à cinquante.

Réglages

16px
1x

Code

<div class="uv-mcl"><button type="button" class="b" aria-label="Applaudir"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-6-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/><path class="sp" d="M3.5 7.5 2 6M5.5 4.5 5 2.5M8.5 3.2 9.5 1.5"/></svg></span><span class="pt" aria-hidden="true"><i style="--a:0deg"></i><i style="--a:45deg"></i><i style="--a:90deg"></i><i style="--a:135deg"></i><i style="--a:180deg"></i><i style="--a:225deg"></i><i style="--a:270deg"></i><i style="--a:315deg"></i></span><span class="bub" aria-hidden="true">+1</span></button><p class="ct" aria-live="polite"><b>1.204</b> applaudissements</p></div>

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 Micro-interactions

Voir tout : Micro-interactions

Où l’utiliser

Une façon ludique pour les lecteurs de montrer leur appréciation, inspirée des plateformes de blog. Chaque appui fait vibrer la main, lance un anneau d'étincelles et fait monter une bulle avec ton total personnel, pendant que le compteur général augmente. Maintenu, le bouton applaudit à la suite jusqu'à la limite de cinquante puis tremble un peu.

Le compteur suit la langue de la page, au clavier on peut appuyer plusieurs fois sur Entrée ou Espace, et le total se trouve dans une région live polie. Envoie les applaudissements à ton serveur par lots plutôt qu'un par un.