Moving Effect Button
A modern button with animated glowing borders and moving gradient lines. Perfect for futuristic and interactive UIs.
Demo
Interactive Demo
Animated border lines and glowing effect on a modern button.
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 AnimatedButton component in your app:
tsx
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Button content (text or elements). |
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 glowing border and moving gradient lines
- Emerald color scheme with dark background
- Framer Motion-powered infinite animation
- Customizable label and style
- TypeScript support
- Accessible and production-ready
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS
clsx
TypeScript (recommended)