component
Button Hover Shift
By Framerspark
Details
- FramersparkAuthor
- componentType
- 2025-11-13Published
- 2025-11-11Updated
- 2025-10-29Added
- ButtonsCategories
Summary
A sleek button that comes to life on hover—its text and icon shift in opposite directions for an engaging, modern interaction.
Description
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.
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #5161