Loupe qui se transforme en fermeture
La loupe s'étire en champ de recherche et son manche dessine un X pour le fermer ; Échap fonctionne aussi.
Réglages
Code
<div class="uv-msm"><form class="f" role="search"><input type="search" placeholder="Rechercher dans la boutique" aria-label="Rechercher dans la boutique" tabindex="-1"><button type="button" class="b" aria-expanded="false" aria-label="Ouvrir la recherche"><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 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
Un accès compact à la recherche pour les en-têtes à court de place. Le bouton rond s'élargit en un champ complet avec un anneau coloré, pendant que la lentille se déroule et que le manche s'allonge en diagonale pour former, avec un second trait, une icône de fermeture. Un nouveau clic inverse chaque étape.
La transformation repose sur le décalage des traits de simples lignes SVG et reste nette à toute taille. Le bouton expose aria-expanded et un libellé qui change, le champ reçoit le focus à l'ouverture, et Échap le ferme en rendant le focus au bouton.