Skip to content

component

Button Hover Shift

By Framerspark

Details

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.

12001400153998/148/228/309/79/15
  • All · #5161