MagneticButtons

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.

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.