Double Shift Button
A modern, animated button component that creates a smooth double shift effect on hover. Built with Framer Motion for fluid animations.
Demo
Interactive Demo
Hover over the button to see the double shift effect
tsx
Loading...
Installation
Install the required dependencies to get started:
bash
Loading...
Usage
Import and use the DoubleShift component in your React application:
tsx
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to be displayed inside the button |
onClick | () => void | undefined | Function to be called when the button is clicked |
className | string | "" | Additional CSS classes to be applied to the button |
Features
- Smooth double shift animation on hover
- Built with Framer Motion for fluid animations
- Fully customizable through className prop
- TypeScript support out of the box
- Dark mode compatible
- Zero external dependencies (except Framer Motion)
- Production-ready performance
Dependencies
React 18+
Framer Motion
Tailwind CSS (recommended)
TypeScript ( recommended)