Button Glass
Glassmorphic button with layered shadows, blur, and 3D press animation. Use for hero CTAs, marketing pages, and over-image overlays where a regular Button feels flat.
Glassmorphic button with layered shadows, blur, and 3D press animation. Use for hero CTAs, marketing pages, and over-image overlays where a regular Button feels flat.
Primary glass button.
default, outline, ghost, white, black variants.
sm, md (default), lg, xl with matching rounded shapes.
Adjust corner radius from sharp (none) to fully pill (full).
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "ghost" | "white" | "black" | "white-ghost" | "black-ghost" | "link" | "default" | Visual style. |
size | "sm" | "md" | "lg" | "xl" | "icon" | "md" | Height and padding. |
rounded | "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "full" | Corner radius. |
to | RouteLocationRaw | — | When set, renders as NuxtLink. External URLs open in a new tab. |
as | string | "button" | HTML element when to is empty. |
| Slot | Description |
|---|---|
default | Button label and icons. |