Bouton flottant avec menu en verre
Un bouton plus en verre qui pivote en croix et déploie quatre actions en cascade.
Réglages
Code
<div class="uv-gfb"><div class="ls" id="uv-gfb-m" role="menu"><button type="button" role="menuitem" style="--i:3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h9l3 3v13H6zM9 11h6M9 15h4"/></svg><span>Note</span></button><button type="button" role="menuitem" style="--i:2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.5-2h7L17 8h3v11H4z"/><circle cx="12" cy="13" r="3.2"/></svg><span>Photo</span></button><button type="button" role="menuitem" style="--i:1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="13" r="7"/><path d="M12 9.5V13l2.5 1.5M5 4.5L3 6.5M19 4.5l2 2"/></svg><span>Rappel</span></button><button type="button" role="menuitem" style="--i:0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 7h11M9 12h11M9 17h11"/><circle cx="5" cy="7" r="1" fill="currentColor"/><circle cx="5" cy="12" r="1" fill="currentColor"/><circle cx="5" cy="17" r="1" fill="currentColor"/></svg><span>Liste</span></button></div><button type="button" class="fb" aria-expanded="false" aria-controls="uv-gfb-m" aria-label="Créer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></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 Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Les boutons d'action flottants sont parfaits pour les raccourcis de création, et le verre rend le menu ouvert plus léger. Appuyer sur le bouton en verre teinté fait pivoter le plus en croix, assombrit la page derrière et fait monter avec un ressort quatre pilules dépolies l'une après l'autre, chacune avec icône et libellé comme note, photo, rappel ou liste.
Le bouton indique son état avec aria-expanded et contrôle le menu par son id. Choisir une action ou appuyer sur Échap le ferme et rend le focus au bouton, et le menu se replie dans l'ordre inverse.