Button 01

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   The look of the preview is the button-set-* classes of the paste: the button at rest, its row and the words around it. The Embed only holds the mechanics of the animation. On a button of your own, keep your class and add the attribute.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attribute
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-button-motion="magnetic"	The button leans lightly toward the pointer before it reaches it, and settles back with a soft elastic return. Ignores a finger.

   This file plays magnetic. Another animation of the set needs that button's own code on the page: without it, the button stays as the page styled it and the browser console says so. An empty or unknown value plays fill when fill's code is on the page, magnetic otherwise, and says so in the console.
   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-button-motion-duration	0.6	The base length of the return, in seconds: once the pointer is out of reach the button settles back over 1.8 times this, with a soft elastic ease. The pull itself follows the pointer at its own pace.
   data-button-motion-pull	0.1	How far the button follows the pointer, as a share of the distance between the button's centre and the pointer.
   data-button-motion-reach	0.4	Where the pull begins, as a share of the button's height around its box.
   data-button-motion-press	0.96	The scale of the button while it is pressed.

Two files, no build step. It also needs GSAP 3 on the page, loaded with the tag in step 1. Without it the button stays exactly as the page styled it, and nothing moves. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call ButtonMotion.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-button-motion-duration	0.6	The base length of the return, in seconds: once the pointer is out of reach the button settles back over 1.8 times this, with a soft elastic ease. The pull itself follows the pointer at its own pace.	A quick snap back into place	A slow, loose settle
   data-button-motion-pull	0.1	How far the button follows the pointer, as a share of the distance between the button's centre and the pointer.	The button barely moves, a nod	The button sits under the pointer, at 1 it is dragged
   data-button-motion-reach	0.4	Where the pull begins, as a share of the button's height around its box.	The pull starts only once the pointer is almost on it	The pull starts from far away, which feels sticky between two close buttons
   data-button-motion-press	0.96	The scale of the button while it is pressed.	A deep press, the button shrinks visibly under the click	Barely a press, and 1 turns it off

2. Drive it from JavaScript

   When a button arrives after the page has loaded, when something else than the pointer has to play it, or when the page reacts to a hover.
   JavaScript Expand Copy

   const element = document.querySelector('[data-button-motion]');
   element.addEventListener('buttonmotion:enter', (e) => {
     console.log(e.detail);
   });
   
   const button = ButtonMotion.mount(element);   // the button auto() mounted, or a new one
   button.enter();     // plays the hover in, from the centre
   button.leave();     // and out
   button.refresh();   // after changing an attribute
   
   // Buttons added after the page loaded: mount everything marked inside them.
   ButtonMotion.auto(container);
   
   // When the button leaves the page:
   ButtonMotion.destroy(element);   // the content goes back exactly as it was

   Show all 15 lines

3. Fit it to your page

   • Mark the button: data-button-motion="magnetic" on the <button> or the <a> that is the button. Its content becomes the label: the engine moves the nodes into one span at mount and puts them back at destroy.
   • Settings go on the same element, as more attributes: data-button-motion-pull="0.3". Three levels, least specific first: DEFAULTS, then window.ButtonMotionSettings = { pull: 0.3 } declared before the engine, then the element's own attributes.
   • The preview ships whole. snippet.html with the last part of button-01.css, after the line look, left out of the Webflow Embed, is the preview: the same button, row and words, in Geist and Geist Mono, loaded by the font tag of the Code tab. Those button-set-* classes are never read by the engine. On a button of your own, keep your class and add the attribute; that last part of the file can then go.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.
   • Other buttons of the set on the same page. Every button of the set ships the same base. Paste another button's Embed, or load its two files, in any order: the file that loads first builds the base, and each one after it only adds its animation. The base rules its stylesheet repeats are the same rules. Each animation reads the DEFAULTS of its own file and the settings block of its own Embed, the window.ButtonMotionSettings that stood when its file loaded.
   • A value whose file is not on the page waits for it: with this file alone, a button marked data-button-motion="roll" stays the page's plain button, and the console says so after ten seconds. An empty or unknown value plays fill when fill's file is on the page, and the first animation on the page otherwise, magnetic with this file alone, with a warning that names the element.
   • A finger gets nothing: magnetic follows a pointer, and a touch pointer only exists for the length of a tap.
   • The keyboard: a focus the browser would show a ring for enters the button from its centre, where the pull is nothing, so the keyboard shows the focus ring of the page and no movement. Enter and Space press it like a click does.
   • From JavaScript: ButtonMotion.mount(el, overrides) returns { element, settings, mode, enter(), leave(), refresh(), destroy() }, or null for a button whose animation's file is not on the page. enter() and leave() play from the centre. refresh() reads the attributes again and, if the value of data-button-motion changed to an animation on the page, rebuilds the button for it. destroy() puts the content back exactly as it was. ButtonMotion.destroy(el), ButtonMotion.refresh(el), ButtonMotion.auto(root), ButtonMotion.defaults (the DEFAULTS of the first file of the set on the page) and ButtonMotion.modes (the animations on the page) complete it. ButtonMotion.register(pack) is how a file of the set hands its animation to the base; the files call it themselves.
   • Events, all bubbling, with { element, mode } in detail: buttonmotion:ready once GSAP is there and the button is built (plus reduced), buttonmotion:enter and buttonmotion:leave around every hover (plus via: pointer, touch, keyboard or api).
   • The state is on the element as data-button-motion-state, idle or hover, for a rule of the page that wants to follow it.
   • **Under prefers-reduced-motion: reduce** magnetic, which is movement and nothing else, does nothing at all, and the press is skipped.
   • The words of the demo are the demo's: the preview ships with them, and on a real page every label is the user's own, in the page's language, or asked for.

4. Avoid the pitfalls

   • The button needs a box. A bare <a> is inline and cannot be transformed; the sheet makes it inline-block at zero specificity, and a class of yours that sets display wins. flex and inline-flex are fine. position: static set by a class of yours would let the layers escape: the engine's layers are absolute inside the button.
   • Two magnetic buttons close together share the same pointer: with a large reach both pull at once. Keep reach under 1 in a row of buttons.
   • A page that never gets GSAP shows a plain button, styled by its class, and the engine says so in the console after ten seconds. Nothing is built before GSAP is there, so the label is not even wrapped.
   • The stylesheet places the layers. Without button-01.css the layers of the animation have no place and no colour, and the engine says so in the console.
   • Two copies of the set's base on one page are one. The file that loads first builds the base and the others use it, so the button of a newer version of the bank pasted beside an older one runs on the older base. The first file to bring an animation keeps it, too: the whole set's file and this one on the same page play magnetic with the settings of the one that loaded first.
   • **Webflow turns a <button> with children into a Link block**: the engine reads the attribute, never the tag, so an <a> with the attribute is a button to it.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.