Button Hover Shift · Free Buttons Component
A sleek button that comes to life on hover—its text and icon shift in opposite directions for an engaging, modern interaction.
Key Features:
✨ Animated Hover Effect: Text slides left while the icon moves right, creating a lively visual interaction.
🎨 Fully Customizable: Easily adjust colors, fonts sizes, text, and transitions
⚡ Drop-In Ready: Works instantly in any Framer project—no extra setup needed.
🔗 Interactive Actions: Supports links, navigation, or custom interactions with Framer’s built-in tools.
🛠️ Lightweight & Performant: Built with clean motion for smooth, lag-free animation.
How to Use:
Add to Canvas: Copy the button component into your Framer project.
Customize Style: Adjust colors, fonts, corner radius, etc. in the right-hand properties panel.
Link Action: Set the button’s link or interaction (e.g., navigate to a page, open a modal, trigger animation).
Preview Hover Effect: Hover in Preview mode to see the smooth icon-and-text shift animation in action.
A sleek button that comes to life on hover—its text and icon shift in opposite directions for an engaging, modern interaction.
Key Features:
✨ Animated Hover Effect: Text slides left while the icon moves right, creating a lively visual interaction.
🎨 Fully Customizable: Easily adjust colors, fonts sizes, text, and transitions
⚡ Drop-In Ready: Works instantly in any Framer project—no extra setup needed.
🔗 Interactive Actions: Supports links, navigation, or custom interactions with Framer’s built-in tools.
🛠️ Lightweight & Performant: Built with clean motion for smooth, lag-free animation.
How to Use:
Add to Canvas: Copy the button component into your Framer project.
Customize Style: Adjust colors, fonts, corner radius, etc. in the right-hand properties panel.
Link Action: Set the button’s link or interaction (e.g., navigate to a page, open a modal, trigger animation).
Preview Hover Effect: Hover in Preview mode to see the smooth icon-and-text shift animation in action.
