¿Te ha sido útil este artículo?

HTML + CSSMicro-interactions

Article utile avec pouces

Le pouce choisi sautille et l'autre se rétracte ; oui lance des confettis, non déplie un champ pour dire quoi améliorer.

Réglages

16px
1x

Code

<div class="uvq15-thm"><p class="q">Cet article vous a-t-il aidé ?</p><div class="ch"><button type="button" class="y" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10v11H4a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zM7 10l4-7a2.5 2.5 0 0 1 3 2.5V9h5.5a2 2 0 0 1 2 2.3l-1.2 7.5a2.5 2.5 0 0 1-2.5 2.2H7"/></svg><span>Oui</span><span class="cf" aria-hidden="true"><i style="--a:0deg"></i><i style="--a:51deg"></i><i style="--a:102deg"></i><i style="--a:153deg"></i><i style="--a:204deg"></i><i style="--a:255deg"></i><i style="--a:306deg"></i></span></button><button type="button" class="n" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 14V3h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM17 14l-4 7a2.5 2.5 0 0 1-3-2.5V15H4.5a2 2 0 0 1-2-2.3l1.2-7.5A2.5 2.5 0 0 1 6.2 3H17"/></svg><span>Non</span></button></div><div class="mo"><form class="fm"><textarea rows="2" placeholder="Que pouvons-nous améliorer ?" aria-label="Que pouvons-nous améliorer ?"></textarea><button type="submit" class="sd">Envoyer</button></form></div><p class="ty" aria-live="polite"></p><button type="button" class="rs" hidden>Modifier la réponse</button></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Micro-interactions

Voir tout : Micro-interactions

Où l’utiliser

Les centres d'aide et les documentations terminent les articles par une question rapide, oui ou non, et ce bloc fait sentir que la réponse est bien reçue. Avec oui, le pouce rebondit, quelques confettis partent et un merci s'affiche ; avec non, le pouce s'incline vers le bas et un champ se déplie pour expliquer ce qui manquait. Le bouton inutilisé se replie en douceur.

La couleur principale marque une réponse positive et la secondaire une réponse négative et son formulaire. La question est le texte modifiable. Envoie le choix et le commentaire à ton outil d'analyse lors de l'envoi, et garde Modifier la réponse pour les clics par erreur.