component
Magnetic__Button_01
By Nidhin nidwork
Details
- Nidhin nidworkAuthor
- componentType
- 2026-06-18Published
- 2026-06-05Updated
- 2026-05-28Added
- ButtonsCategories
Summary
Smooth magnetic hover button effect
Description
🧲 Buttons That Actually Move Most buttons just sit there. This one reacts . As your cursor gets close, it pulls toward you with real spring physics — then snaps back the moment you leave. ✨ What Makes It Special? Magnetic Pull Effect — Button subtly follows your cursor with real spring physics, creating a satisfying, high-end feel Smooth Spring Animation — Powered by Framer Motion for buttery-smooth, natural movement every time Full Color Control — Customize default and hover states for background, text, and border separately Drop Shadow Control — Fine-tune shadow X, Y, blur, spread, color, and hover scale from the panel No Code Needed — Every property is exposed in the right panel. Just drop it in and tweak 💡 Why You'll Love It 🎨 Portfolios : Make your CTAs feel as crafted as your work 🛒 E-Commerce : Turn "Buy Now" into something people actually want to click 🚀 Landing Pages : Boost conversions with a button that demands attention 📝 Blogs : Keep readers exploring with interactions they can't ignore 👉 One hover, and you'll never go back to a static button.
Introduction
Smooth magnetic hover button effect
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #5637