Glow Button
A visually striking button component with an animated glow effect that creates an engaging hover interaction. Perfect for call-to-action buttons and highlighting important actions in your interface.
Description
The Glow Button features a subtle glow animation that intensifies on hover, creating a modern and interactive user experience. The component maintains accessibility standards while providing eye-catching visual feedback.
Customization
Adding New Color Variants
You can easily add new color variants by extending the variants object in the component. Each variant requires both light and dark theme configurations.
Loading...
Color Properties Explained
Each variant contains the following customizable properties:
- outerGlow: The outer shadow/glow effect around the button
- blobGlow: The main glow color for the animated blob effect
- blobHighlight: The highlight color within the blob gradient
- blobShadow: The shadow cast by the glow blob
- innerGlow: Subtle inner glow effect
- innerHighlight: Inner highlight for depth
- outerBg: Background gradient for the button border
- innerBg: Background gradient for the button content area
- textColor: Text color for the button label
Usage with Custom Colors
Loading...
TypeScript Interface Update
Don't forget to update the TypeScript interface when adding new variants:
Loading...