BubbleButton
Animated glowing button with cursor-following glow, bubble highlight, and outer glow ring. A unique, attention-grabbing CTA component.
Installation
$ npx shadcn@latest add bubble-buttonPreview (Hover to see glow)
Sizes
Custom Glow
Usage (React/TSX)
import { BubbleButton } from "@/components/ui/bubble-button"
export default function Hero() {
return (
<div className="flex gap-4">
<BubbleButton variant="violet" size="lg">
Get Started
</BubbleButton>
<BubbleButton variant="dark">
Learn More
</BubbleButton>
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "violet" | "rose" | "emerald" | "sky" | "amber" | "dark" | "violet" | Color variant of the button. |
| size | "sm" | "md" | "lg" | "md" | Size of the button. |
| glowColor | string | auto | Custom glow color (overrides variant default). |
| disabled | boolean | false | Disables the button. |
| className | string | — | Additional CSS classes. |
| children | ReactNode | — | Content inside the button. |
Design Notes
- Fully rounded (pill shape) with gradient background.
- Glow blob follows cursor position in real-time.
- Outer glow ring intensifies on hover.
- Bubble highlight creates a glass-like top edge.
- 6 color variants with custom glow override.