Glowy Button
A signature pill-shaped button featuring a premium glass-morph interaction. Initially covered by a full-width colored glass sheet, the layer smoothly shrinks into a compact circle on hover/tap, revealing a hidden icon while emitting a vibrant outer glow.
npx futureuikit add glowyPremium pill-shaped UI with edge-to-edge glass sheet coverage.Interactive shrinking glass: the full-width layer collapses into a sleek circle on the right side upon interaction.Dynamic icon reveal: the icon scales into view as the glass sheet shrinks.Smooth physics-based spring animations for a responsive, modern feel.Semantic variant support: Primary, Success, Warning, Danger, Info, and Secondary.Integrated with Lucide React for high-quality iconography.Full mobile support: animations are optimized for both hover and touch interactions.
- Import the GlowyButton component from your UI directory.
- Choose a semantic variant (primary, success, etc.) or provide custom colors.
- Optionally pass a Lucide icon component via the 'icon' prop.
- Add your button text as children of the component.
- Use it for high-impact call-to-action buttons that need extra visual emphasis.