Magnetic Button is a standard Breakdance button that leans towards the mouse as it gets close, then springs back when the mouse leaves. The label moves a little further than the button, which gives it a sense of depth. You set the pull, the easing and an optional glow.
Four versions of the same element with different strength, easing, scale and glow settings. Bring the cursor close to a button and move it around.
It is set up like any other Breakdance button, with a few extra motion settings.
Drop Magnetic Button onto your page and type the button text and link, just like a normal button.
Use the familiar Breakdance button design panel for colours, size, corners and typography.
Set the magnetic strength, how far the label moves, the easing and the return time, then add a glow if you want one.
Everything is set in the Breakdance editor. No code needed.
The button moves towards the mouse while the cursor is over it or within about 50px of its edge.
The text has its own movement setting, so it can travel further or less than the button for a layered look.
Set how strongly the button is pulled, from 0.1 for a slight lean to 1 for a strong pull.
Choose Smooth, Snappy, Elastic, Overshoot or Exponential for how the button follows the cursor.
When the mouse leaves, the button springs back to its place. You set how long the return takes.
Grow the button slightly on hover, from 1 (no scale) up to 1.5.
Add a blurred glow behind the button on hover with your own colour and strength.
Uses the standard Breakdance button design options, including custom colours, size, corners and full width.
The button text and URL accept dynamic data, so it works in templates and loops.
Use it for the one or two buttons you most want people to click.
Give the main button on a landing page a little life so it stands out.
Draw attention to the plan you want visitors to choose.
Add a playful touch to contact or project buttons on creative sites.
Make the booking or ticket button the obvious next step.
Encourage clicks on a subscribe button at the end of a post.
Pair it with a bold headline for a launch or pre-order page.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Text | The button label. Accepts dynamic data. | Hover Me |
| Link | Where the button goes. Accepts dynamic data. | # |
| Magnetic Settings | ||
| Magnetic Strength | How strongly the button is pulled towards the cursor (0.1 to 1). | 0.5 |
| Text Movement | How far the label moves inside the button (0 to 0.5). 0 keeps the text still. | 0.3 |
| Magnetic Radius (px) | The distance over which the pull fades out (50 to 300). | 200 |
| Animation Easing | Smooth, Snappy, Elastic, Overshoot or Exponential. | Snappy |
| Return Duration (s) | How long the button takes to spring back when the mouse leaves (0.2 to 1.5). | 0.7 |
| Design | ||
| Button | The standard Breakdance button design: style, colours, size, corners, typography and full width. | Custom, #6366f1, large, round |
| Enable Glow | Show a blurred glow behind the button on hover. | On |
| Glow Color | Colour of the glow. | #6366f1 |
| Glow Intensity | Opacity of the glow on hover (0.1 to 1). | 0.5 |
| Hover Scale | How much the button grows on hover (1 to 1.5). | 1.05 |
| Spacing | Top and bottom margin. | — |
The motion uses the GSAP animation library, which the element loads for you from a CDN. You do not need to add anything else.
The effect follows the mouse pointer, so it is a desktop effect. On touch screens the button still works as a normal link.
Yes. The design panel is the standard Breakdance button panel, so you can use the same colours, sizes, corners and typography as your other buttons.
The button reacts once the cursor is over it or within about 50px of its edge. The Magnetic Radius setting controls how quickly the pull fades with distance.
Yes. Switch off Enable Glow in the Magnetic Effects section and the button keeps the movement without the glow.
Magnetic Button is included with Phox Elements, along with 150+ other premium elements for Breakdance.