Magnetic Button

A button drawn toward the cursor that springs back when the cursor leaves. Motion springs.

Original
GPU-friendly
Motion
Reduced-motion ready
Customisable
908 B gzip

An original by PasteMotion · MIT License

WidthFull

Code

index.html

<div class="magnetic-button">
  <button class="magnetic-button__button" type="button">
    <span class="magnetic-button__label">Hover me</span>
  </button>
</div>

How to use it

Paste the HTML where the animation should appear.
Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
Load Motion from the CDN (see the JS tab), then add the script.
Adjust the custom properties (--accent, --color-2) on .magnetic-button to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.