Schwebender Button mit Glasmenü
Ein gläserner Plus-Button, der sich zu einem X dreht und vier Aktionen kaskadenartig entfaltet.
Einstellungen
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>Notiz</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>Foto</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>Erinnerung</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="Erstellen"><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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Liquid Glass
Alle ansehen: Liquid GlassWofür du ihn nutzen kannst
Floating Action Buttons eignen sich für Schnellaktionen zum Erstellen, und Glas lässt das geöffnete Menü leicht wirken. Ein Druck auf den getönten Glasbutton dreht das Plus zu einem Schließen-Zeichen, dunkelt die Seite ab und lässt nacheinander vier mattierte Pillen hochfedern, jede mit Symbol und Text wie Notiz, Foto, Erinnerung oder Liste.
Der Button meldet seinen Zustand mit aria-expanded und steuert das Menü über dessen id. Eine Aktion oder Escape schließt es und gibt den Fokus zurück, und das Menü klappt für einen sauberen Abgang in umgekehrter Reihenfolge zu.