Bounce Button
A playful button with a smooth bounce animation on hover. Great for interactive and modern UIs.
Demo
Interactive Demo
Hover to see the bounce animation.
tsx
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 BounceButton 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 bounce effect on hover
- Emerald color scheme with rounded corners
- Framer Motion-powered transitions
- Customizable label and style
- TypeScript support (using BaseButtonProps from your types file)
- Accessible and production-ready
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)