An interactive button component with magnetic cursor attraction and smooth animations. Features multiple style presets with engaging hover effects that make buttons follow the curs
Make it with Workshop
Build your own component with AI
--
Note: FramerHub Cyber Sale bundle:100 premium Framer components for just $69 with lifetime updates (WORTH $990+) and a 14 day money back guarantee.
👉 https://framerhub.io/cyber-sale
--
The Magnetic Buttons component creates an immersive button interaction where the button smoothly follows the cursor when nearby, with counter-animated text effects and customizable styling. It includes 4 pre-configured style presets, plus a custom mode where you can connect any component from your canvas to make it magnetic. Features
Magnetic Attraction - Smooth cursor-following effect with configurable strength
Text Animations - Counter-movement text effect creating depth
4 Style Presets - Rounded Rectangle, Circle Fill, Pill Fill, and Circle Outline
Style-Specific Styling - Each preset has its own dedicated styling panel
Custom Component Mode - Connect any component from your canvas to make it magnetic
Filler Animations - Smooth fill-from-bottom effect for Circle and Pill styles
Hover States - Customizable hover colors, borders, and fill effects
Canvas Safe - Disabled in Framer canvas, works in Preview/Live mode
Performance Optimized - Smooth 60fps animations with requestAnimationFrame
Flexible Controls - All styling controls are optional with smart defaults
- Clean rectangular button with subtle border transition
- Border can thicken and change color on hover
- Perfect for modern, minimal interfaces
- Customizable width, height, padding, and border radius
- Round button with circular filler animation
- Pink accent color (default) with fill-from-bottom effect on hover
- Great for call-to-action buttons
- Perfect circle shape with customizable size and filler color
- Rounded pill-shaped button with black fill (default)
- Text can invert to white on hover
- Modern, bold design
- Customizable border radius for pill shape
- Simple circular outline button
- Border color changes on hover
- Minimalist design with clean aesthetics
- Perfect for secondary actions or dark backgroundsLicense &
Updates
Per-site commercial license** (per project/domain).
Creator License: Allowed to include in templates for resale Perfect for Framer template creators)
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!
For support DM me at X/Twitter: https://x.com/Shahul_the_devFollow me at https://x.com/Shahul_the_dev & https://www.linkedin.com/in/shahul-hameed-maricar/ for amazing free components.
