Botón flotante con menú de cristal
Un botón + de cristal que gira hasta ser una X y despliega cuatro acciones en cascada.
Ajustes
Código
<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>Nota</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>Recordatorio</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>Lista</span></button></div><button type="button" class="fb" aria-expanded="false" aria-controls="uv-gfb-m" aria-label="Crear"><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 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 Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Los botones flotantes son ideales para atajos de creación y el cristal hace que el menú abierto se sienta ligero. Al pulsar el botón de cristal tintado, el más gira hasta convertirse en una equis, la página de detrás se oscurece y suben con un muelle cuatro píldoras esmeriladas una tras otra, cada una con icono y texto, como nota, foto, recordatorio o lista.
El botón informa de su estado con aria-expanded y controla el menú por su id. Elegir una acción o pulsar Escape lo cierra y devuelve el foco al botón, y el menú se recoge en orden inverso para una salida limpia.