HTML + CSSLiquid Glass
Floating button with glass menu
A glass plus button that spins into an X and unfolds four actions in a cascade.
Settings
16px
1x
18px
0.18
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>Reminder</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>List</span></button></div><button type="button" class="fb" aria-expanded="false" aria-controls="uv-gfb-m" aria-label="Create"><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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
Floating action buttons are great for creation shortcuts, and glass makes the expanded menu feel light. Pressing the tinted glass button rotates the plus into a close mark, dims the page behind and springs four frosted pills upward one after another, each with an icon and label such as note, photo, reminder or list.
The button reports its state with aria-expanded and controls the menu by id. Choosing an action or pressing Escape closes it and returns focus to the button, and the menu closes in reverse order for a tidy exit.