Hover Glowing Button
A button with a glowing radial effect that follows the mouse cursor on hover. Fully customizable and perfect for modern, interactive UIs.
Demo
Interactive Demo
Hover and move your mouse to see the glowing effect follow the cursor.
Loading...
Installation
Install the required dependencies to get started:
bash
Loading...
Type Integration
Add the following interfaces to your types file for consistent props and TypeScript support.
typescript
Loading...
Usage
Import and use the GlowingButton component in your Next.js application:
tsx
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Button content (usually text or icon). |
onClick | () => void | undefined | Click handler for the button. |
className | string | "" | Additional CSS classes for the button. |
disabled | boolean | false | Disables the button if true. |
type | "button" | "submit" | "reset" | "button" | Button type attribute. |
Features
- Animated glowing radial effect follows mouse on hover
- Customizable glow color, intensity, radius, and duration
- Framer Motion-powered transitions
- Accessible and production-ready
- TypeScript support
- Customizable label and style
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)