Glass Button
A physical glass button component with dynamic SVG displacement shaders, chromatic aberration, tone modes, customizable tint, and cursor-following specular light.
Examples
Circle Icon Buttons
Installation
$ npx shadcn@latest add https://akshitr.com/r/glass-button.json
Usage
import GlassButton from "@/components/glass-button";
export default function Example() {
return (
<GlassButton size="md" tone="dark" pointerLight>
Explore collection
</GlassButton>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Button height and scale: 36px, 44px, or 56px. |
shape | "pill" | "circle" | "pill" | Pill for labels, circle for single icons or avatars. |
tone | "dark" | "light" | "dark" | Smoky glass with white label, or bright warm glass with dark label. |
tint | string | - | Any CSS color to tint the glass shader. Label switches to white. |
refraction | number | 0.6 | Backdrop bending intensity through SVG displacement map (0 to 1). |
frost | number | 0.35 | Backdrop blur intensity (0 for clear to 1 for frosted). |
swell | number | 0.5 | Lens scale expansion under cursor hover (0 to 1). |
pointerLight | boolean | false | Enables cursor-following interior specular pool and rim glint. |
href | string | - | When provided, automatically renders as an accessible Next.js link. |
Use Cases
- Hero Primary & Secondary CTAs: Create high-impact call-to-action buttons that blend seamlessly over vibrant background gradients or media.
- Glassmorphic Navigation Controls: Use circle and pill variants for floating toolbars, media player controls, or icon buttons.
- High-Tech & Futuristic Landing Pages: Give Web3, AI, or hardware product websites an elevated tactile hardware feel.
- Interactive Badge Links: Render interactive tinted tags or external action links with pointer-tracking specular reflections.
