Pressable Button
A tactile, animated button with a 3D press effect, shadow, and highlight. Supports filled and outline variants.
Demo
Interactive Demo
Press and hold to see the animated press effect and shadow.
Loading...
Installation
Install the required dependencies to get started:
bash
Loading...
Type Integration
Add the following interface to your types file for consistent props and TypeScript support.
typescript
Loading...
Usage
Import and use the PressableButton 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. |
variant | "filled" | "outline" | "filled" | Button style variant. |
Features
- Pressable 3D effect with animated shadow
- Filled and outline variants
- Smooth color transitions on hover and press
- Customizable label and style
- Framer Motion-powered transitions
- TypeScript support
- Accessible and production-ready
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)