Magnetic Buttons

Interactive magnetic buttons that follow your cursor

One-time payment
Lifetime updates
Commercial license
Live Preview

Overview

Interactive magnetic buttons that follow your cursor

  • Physics-based cursor following
  • 4 pre-styled button presets
  • Custom component support
  • Smooth hover animations
  • Text counter-movement effect

Magnetic Buttons

Create interactive buttons that magnetically follow your cursor with smooth, physics-based motion. Choose from 4 pre-styled presets or connect your own custom component to add the magnetic effect.

Features

Physics-Based Motion Smooth, natural cursor-following with customizable magnetic strength and smoothness.

4 Button Presets Rounded Rectangle, Circle Fill, Pill Fill, and Circle Outline styles ready to use.

Custom Component Support Connect any Framer component to make it magnetic - icons, cards, or complex designs.

Text Counter-Movement Adds depth by moving text in the opposite direction of the button.

Use Cases

Call-to-Action Buttons — Make CTAs more engaging and interactive.

Navigation Elements — Create memorable navigation experiences.

Portfolio Showcases — Highlight clickable elements with magnetic effects.

Landing Pages — Add premium interactivity to key conversion points.

How to Use

Installation

VIDEO PLACEHOLDER: Installation Tutorial

  1. Log in to your account at framerhub.io
  2. Navigate to framerhub.io/dashboard
  3. Find Magnetic Buttons in your Recent Purchases
  4. Click the "Copy" button
  5. Open your Framer project
  6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Customization

Type Selection

  • Default: Use pre-styled button presets
  • Custom: Connect your own Framer component

Magnetic Behavior

  • Magnetic Strength: How strongly the button follows cursor (0-1)
  • Distance Threshold: Activation range for the effect
  • Smoothness: Animation fluidity (lower = smoother)
  • Text Counter Move: Depth effect intensity

Button Styles Each preset has full customization for dimensions, typography, colors, and hover states.

Quick Tips

Strength Settings — Start with 0.3 for subtle effect. Use 0.5-0.8 for more dramatic following.

Smoothness — Values around 0.1 provide the best balance of responsiveness and fluidity.

Custom Mode — When connecting custom components, ensure they have visible boundaries for best effect.

Hover States — Customize hover colors to provide clear feedback when the magnetic effect activates.

License

Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

Why Designers Love This

Turn ordinary buttons into engaging interactive elements. The magnetic effect adds a layer of polish and interactivity that users remember, making your interface feel premium and alive.

Magnetic Buttons - $5

Interactive magnetic buttons that follow your cursor

One-Time Payment
Lifetime Access
Unlimited sites

You might also like

Why Choose Framer Hub Components

Loved by Framer teams

Used by Framer professionals who need premium, no-code experiences.

"The Best Framer CMS Filtering Plugin I've Found — Truly a Game-Changer. I've tested a lot of Framer CMS filtering and sorting components — both free and paid — and this is by far the best one I've come across."
Pierre Azalbert
"He really helped me out when I needed assistance adding it to my Framer project. Super fast customer support highly recommend!"
Salman Abdulrazaq Ali
"We had tried a couple of other Framer CMS filter components but they were buggy, hard to use and support was slow or non-existent. FramerCMSFilter is easier to use and has a lot of added functionality."
Mark Williamson

Got questions? We've the answers

Got questions? We've the answers

Everything you need to know about FramerHub.