MagneticButtons

Magnetic Buttons

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.

Magnetic Buttons