Cyber Button
A modern button with animated polygon clip-path transitions, glowing borders, and subtle hover effects. Perfect for futuristic, creative, and interactive UIs.
Demo
Interactive Demo
Hover to see the polygon clip-path animation and glowing border effect.
Loading...
Installation
Install the required dependencies to get started:
bash
Loading...
Type Integration
Create a lib folder at the root of your project and add a types.ts file with the following interface. This interface is used by all button components for consistent props and TypeScript support.
typescript
Loading...
Usage
Import and use the Cyber Button 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
- Polygon clip-path animation on hover
- Glowing border and text shadow effects
- Smooth Framer Motion-powered transitions
- Customizable label, size, and colors
- Accessible and semantic HTML structure
- Lightweight with minimal dependencies
- Full TypeScript support
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)