Lupa que se transforma en cerrar
La lupa se estira en un buscador y su mango dibuja una X para cerrarlo; Escape también lo cierra.
Ajustes
Código
<div class="uv-msm"><form class="f" role="search"><input type="search" placeholder="Buscar en la tienda" aria-label="Buscar en la tienda" tabindex="-1"><button type="button" class="b" aria-expanded="false" aria-label="Abrir búsqueda"><svg viewBox="0 0 24 24" aria-hidden="true"><circle class="c" cx="10" cy="10" r="6"/><path class="h" d="M5 5l14 14"/><path class="x" d="M19 5L5 19"/></svg></button></form></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
Un acceso compacto a la búsqueda para cabeceras con poco espacio. Al pulsar el botón redondo se ensancha en un campo completo con un anillo de color, mientras la lente de la lupa se desenrolla y su mango se alarga en una diagonal que, junto a un segundo trazo, dibuja el icono de cerrar. Al pulsarlo otra vez todo vuelve atrás.
La transformación usa el desplazamiento del trazo en líneas SVG sencillas, así que se ve nítida a cualquier tamaño. El botón expone aria-expanded y una etiqueta que cambia, el campo recibe el foco al abrirse y Escape lo cierra y devuelve el foco al botón.