Magnetic Buttons: buttons people want to click

How to use it

1. Add the two files

<link rel="stylesheet" href="magnetic.css">
...
<script src="magnetic.js"></script>

2. Write a button

The class mbtn gives the look. The attribute data-magnetic gives the pull. The inner span makes the text move a little more than the button, which adds depth.

<a class="mbtn" data-magnetic href="/contact">
  <span class="mbtn-label">Get started</span>
</a>

3. Pick a style

<a class="mbtn" data-magnetic>Filled</a>
<a class="mbtn mbtn--ghost" data-magnetic>Outline</a>
<a class="mbtn mbtn--glow" data-magnetic>Glowing</a>

Change the colours

Everything is driven by CSS variables. Set them once for the whole site, or on a single button.

:root {
  --mbtn-a: #ff5c8a;       /* gradient start */
  --mbtn-b: #ffb86b;       /* gradient end   */
  --mbtn-text: #ffffff;    /* text colour    */
  --mbtn-radius: 14px;     /* corner radius  */
}

All options

Where to use it

• On the one button that matters. The magnetic pull tells the visitor which button is the main one.
• Not on every link. If everything moves, nothing stands out.
• The ripple works without the pull. Any .mbtn gets the click ripple, also on phones.

Common questions

Does it work on real buttons and on links?

Yes, both button and a elements work.

What about keyboard users?

The buttons keep a clear focus outline. The pull is for mouse users only, and the button always stays clickable.

What is in the download

• magnetic.js the pull and the ripple, about 2 KB
• magnetic.css three button styles, about 2 KB
• index.html and demo.css the demo page you see above
• README.txt and LICENSE.txt the short guide and the MIT licence

Licence

MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.