¿Te ha sido útil este artículo?

HTML + CSSMicrointeracciones

Valoración útil con pulgares

El pulgar elegido salta y el otro se encoge; un sí trae confeti y un no despliega un campo para contar qué mejorar.

Ajustes

16px
1x

Código

<div class="uvq15-thm"><p class="q">¿Te ha sido útil este artículo?</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>Sí</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>No</span></button></div><div class="mo"><form class="fm"><textarea rows="2" placeholder="¿Qué podemos mejorar?" aria-label="¿Qué podemos mejorar?"></textarea><button type="submit" class="sd">Enviar</button></form></div><p class="ty" aria-live="polite"></p><button type="button" class="rs" hidden>Cambiar respuesta</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.

Versión Markdown con todo el código, para asistentes de IA

Más en Microinteracciones

Ver todos: Microinteracciones

Dónde usarlo

Los centros de ayuda y la documentación cierran los artículos con una pregunta rápida de sí o no, y este bloque hace que la respuesta se sienta recibida. Con un sí, el pulgar rebota, salta un poco de confeti y se da las gracias; con un no, el pulgar baja y se despliega un campo para explicar qué faltaba. El botón que no se usa se recoge con suavidad.

El color principal marca la respuesta positiva y el secundario la negativa y su formulario. La pregunta es el texto editable. Envía la elección y el comentario a tu analítica en el envío del formulario, y deja Cambiar respuesta para quien se equivoque al pulsar.