Magnetic Button - Demo
Vanilla Style
This kind of interaction is suitable for CTA button because of it's stickiness and it tends to grab your attention as it keeps attracting to you which is kinda persistent.
Just like how a salesperson would do.
Mouse over the button to test.
Magnetic Button - Vanilla Style
Vanilla Style
Vanilla style to keep things as simple as possible.
You can always start with this one and style it according to your preferred design and add in stuff that you need along the development process.
Magnetic Button - Similar interactions with different smoothing
Moving Text with Delayed Container
To make things a little more lively and interactive, you can apply 2 similar interactions into it with different smoothing percentage.
Mouse over the button and see the text and the button moving at different speed.
Magnetic Button - Ghosting style
Ghosting Style
If you would like to make it a little more fancy, you can add in all sort of style and additional animations into the magnetic button. It's all up to individual preference and how you match it with your project's design concept.
Here's a ghosting style magnetic button that will leave trails while moving around.
Mouse over the button to see the ghosting effect. Try moving your cursor faster and slower to see the differences.
