- Seguidores
- 2.481
- Publicaciones
- 312
Botón seguir que cambia de ancho
Seguir se convierte en Siguiendo con un más que gira hasta ser un check; al volver a pasar el ratón ofrece dejar de seguir.
Ajustes
Código
<div class="uvq15-flw"><span class="av" aria-hidden="true">MR</span><b class="nm">Martina Ríos</b><small class="rl">Ilustradora en Bilbao</small><dl><div><dt>Seguidores</dt><dd class="n">2.481</dd></div><div><dt>Publicaciones</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">Seguir</span><span>Siguiendo</span><span>Dejar de seguir</span></span></button></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Los botones de seguir cambian a menudo y sus textos tienen largos muy distintos, así que este anima su propio ancho en lugar de dar saltos. El signo más gira hasta ser un check, la etiqueta pasa a Siguiendo, el contador de seguidores rueda uno y el avatar recibe un pequeño anillo. Más tarde, al pasar por encima, el botón se vuelve rojo con Dejar de seguir.
El color principal es el botón relleno y el secundario el rojo de aviso para dejar de seguir. Ese estado solo aparece después de que el puntero salga una vez, así que nunca salta justo tras el clic. En pantallas táctiles la etiqueta se queda en Siguiendo.