Donate Now Button
A playful and interactive donate button with animated text and floating hearts, powered by Framer Motion. Perfect for donation and call-to-action sections.
Demo
Interactive Demo
Hover to flip the text, click to see floating hearts!
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 DonateNow component in your Next.js application:
tsx
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Donate Now" | The button label to display. |
flipText | string | "Feel Good Later" | Text to show when the button is hovered. |
onClick | () => void | undefined | Callback function triggered on button click. |
disabled | boolean | false | If true, disables the button interaction. |
type | "button" | "submit" | "reset" | "button" | Specifies the native button type. |
className | string | "" | Additional CSS classes to apply to the button. |
children | React.ReactNode | text | Optional custom content to render inside the button. |
Features
- Animated text flip on hover
- Floating heart particles on click
- Customizable button label
- Framer Motion-powered transitions
- TypeScript support
- Production-ready and accessible
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)