Shadow Button
A modern button with animated shadow and elevation effects. Great for interactive and accessible UIs.
Demo
Interactive Demo
Hover or tap to see the animated shadow effect.
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 ShadowButton component in your Next.js application:
tsx
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Button content (usually text or icon). |
className | string | "" | Additional CSS classes for the button. |
onClick | () => void | undefined | Click handler for the button. |
disabled | boolean | false | Disables the button if true. |
type | "button" | "submit" | "reset" | "button" | Button type attribute. |
Features
- Animated shadow and elevation effect on hover/tap
- Orange 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)