Comunidad de diseñohace 4 h
¿Qué tipografía usáis para interfaces?Debate86 comentarios
Votos con cifras que ruedan
Flechas para votar a favor o en contra: la flecha salta y solo ruedan las cifras que cambian, hacia arriba o abajo.
Ajustes
Código
<div class="uvq15-vot"><div class="vb" role="group" aria-label="Votos"><button type="button" class="up" aria-pressed="false" aria-label="Votar a favor"><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="M12 4 4 13h5v7h6v-7h5z"/></svg></button><span class="n" aria-hidden="true">1.284</span><button type="button" class="dn" aria-pressed="false" aria-label="Votar en contra"><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="M12 20 4 11h5V4h6v7h5z"/></svg></button></div><div class="ps"><p class="mt"><span>Comunidad de diseño</span><span>hace 4 h</span></p><b>¿Qué tipografía usáis para interfaces?</b><p class="tg"><span>Debate</span><span>86 comentarios</span></p></div><p class="sr" aria-live="polite"></p></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
En las comunidades, el número de votos lo es todo, así que merece una transición cuidada. Al pulsar una flecha se rellena de color y da un salto, y la puntuación cambia cifra a cifra: solo ruedan las que cambian de verdad, hacia arriba con un voto a favor y hacia abajo con uno en contra. Si pulsas la misma flecha otra vez, el voto se quita.
El color principal marca los votos a favor y el secundario los votos en contra, y la cifra toma el color de tu voto. El título de la publicación es el texto editable. Pasar directamente de abajo a arriba mueve la cifra dos puntos, como en la mayoría de foros.