What is a magnetic button?
A magnetic button is a hover micro-interaction made popular by award-winning sites on Awwwards. When the cursor enters a radius around the button, the button follows it a little, then eases back to its place when the cursor leaves. A second, smaller movement on the text and icon (inner parallax) makes it feel three-dimensional.
It works because it rewards the visitor for moving toward the call to action. The button feels alive exactly where you want attention, without flashing or distracting anywhere else.
How to add a magnetic button in Elementor
- Add a native Elementor Button widget and style it as usual (text, link, colors, padding).
- Open the widget's Advanced tab and find Pro Effects – Buttons.
- Choose Magnetic Hover.
- Set the Magnet Strength (how far the button follows the cursor) and the Activation Radius (how close the cursor must be).
- Tune Smoothing for the response speed and Inner Parallax Strength for the drift of the text and icon.
- Publish and hover the button.
Because it's an extension of the native Button widget, you keep all of Elementor's own button styling, and you can apply it to buttons that already exist on your pages.
Settings you can adjust
| Setting | What it does | Default |
|---|---|---|
| Magnet Strength | How much the button moves toward the cursor | 35% |
| Activation Radius | Distance from the button where the effect starts | 60 px |
| Smoothing | Lerp smoothness: low = slow and floaty, high = almost instant | 0.15 |
| Inner Parallax Strength | How much the text and icon drift inside the button | 50% |
| Disable on Mobile | Turns the effect off on touch devices (it's mouse-only) | Yes |
Presets that work
- Very magnetic: Strength 50, Radius 100, Smoothing 0.1.
- Subtle and classy: Strength 20, Radius 40, Smoothing 0.2.
Where to use it
- The main call to action of a hero or pricing section.
- Navigation buttons and icon buttons in creative portfolios.
- Contact or Let's talk buttons at the end of an agency site.
Use it on one or two key buttons per page. When every button is magnetic, none of them stands out.
Performance and accessibility
The effect runs with a small requestAnimationFrame loop — about 5 KB of JavaScript and CSS before minification, with no animation library. It is off on mobile by default because there's no cursor to follow, and it respects the visitor's reduced motion setting.
Related effects
- Sparkle Button — stars burst out of the button on hover.
- Glitch Text — RGB glitch on hover for a cyberpunk feel.
- Custom Cursor (Follower) — a circle that follows the mouse across the whole site; pairs well with magnetic buttons.
