Neon Button
A vibrant button with animated neon glow and fuchsia color. Perfect for retro, cyberpunk, and modern UIs.
Demo
Interactive Demo
Hover to see the animated neon glow.
Loading....
Installation
Install the required dependencies to get started:
bash
Loading...
Type Integration
Important: Create a lib folder at the root of your project (not inside app/). Add a types.ts file with the following interface for consistent props and TypeScript support.
typescript
Loading...
Usage
Import and use the NeonButton 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. |
type | "button" | "submit" | "reset" | "button" | Button type attribute. |
Features
- Animated neon glow effect on hover
- Fuchsia color scheme with dark background
- Framer Motion-powered transitions
- Customizable label and style
- TypeScript support
- Accessible and production-ready
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)