Tron Button
A futuristic Tron-inspired button with animated glowing borders and moving light effects, powered by Framer Motion.
Demo
Interactive Demo
Hover or tap the button to see the animated Tron effect.
Loading...
Installation
Install the required dependencies to get started:
bash
Loading...
Usage
Import and use the TronButton 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 Tron-style glowing border and background
- Customizable button label
- Framer Motion-powered transitions
- TypeScript support
- Production-ready and accessible
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)