- Seguidores
- 2.481
- Publicaciones
- 312
Bouton suivre à largeur variable
Suivre devient Abonné pendant que le plus pivote en coche ; au survol suivant, il propose de se désabonner en rouge.
Réglages
Code
<div class="uvq15-flw"><span class="av" aria-hidden="true">MR</span><b class="nm">Martina Ríos</b><small class="rl">Illustratrice à Bilbao</small><dl><div><dt>Abonnés</dt><dd class="n">2.481</dd></div><div><dt>Publications</dt><dd>312</dd></div></dl><button type="button" class="bt" aria-pressed="false"><span class="ic" aria-hidden="true"><i></i><i></i></span><span class="tx"><span class="vis">Suivre</span><span>Abonné</span><span>Ne plus suivre</span></span></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.
Plus dans Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Les boutons suivre changent souvent d'état et leurs libellés n'ont pas du tout la même longueur, alors celui-ci anime sa propre largeur au lieu de sauter. Le plus pivote en coche, le libellé passe à Abonné, le nombre d'abonnés défile d'une unité et l'avatar reçoit un petit anneau. Plus tard, au survol, le bouton vire au rouge avec Ne plus suivre.
La couleur principale sert au bouton plein, la secondaire au rouge d'alerte pour se désabonner. Cet état n'apparaît qu'après une première sortie du pointeur, il ne clignote donc jamais juste après le clic. Sur écran tactile, le libellé reste sur Abonné.