Button 04

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 places the moving layers and holds the colour of the effect. 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="outline"	A stroke draws itself around the button from the nearest edge, a faint fill settles, and the stroke erases toward the exit.

   This file plays outline. 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, outline 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-color	#ffab1a	The colour of the stroke, and of the faint fill that settles inside it. Options: any CSS colour.
   data-button-motion-duration	0.6	Length of the stroke drawing itself, in seconds; it erases in eight tenths of it.
   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-color	#ffab1a	The colour of the stroke, and of the faint fill that settles inside it. Options: any CSS colour.
   data-button-motion-duration	0.6	Length of the stroke drawing itself, in seconds; it erases in eight tenths of it.	Snappy, the stroke is there at once	Slow, the stroke is seen running round the button
   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="outline" 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-color="#ffab1a". Three levels, least specific first: DEFAULTS, then window.ButtonMotionSettings = { color: '#ffab1a' } declared before the engine, then the element's own attributes.
   • **color is a custom property**, --button-motion-color, so a rule of yours on the button changes it as surely as an attribute does, and loses to an attribute the engine wrote.
   • The preview ships whole. snippet.html with the last part of button-04.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, outline with this file alone, with a warning that names the element.
   • A finger gets the animation for the length of the tap, since a touch pointer enters on touch and leaves on release.
   • The keyboard plays the enter from the centre when the button takes a focus the browser would show a ring for, and the leave when focus goes. 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** the button jumps to its hover state and back with no travel, which keeps the hover readable, 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.
   • The corners are yours. The outline reads the top left radius at each hover and applies it to its four corners, cut to half the short side. A pill's 999px handed to SVG as it is gets clamped on each axis apart, and the stroke drew an ellipse; the stroke also starts from the entry point measured along the rounded path, arcs included, since on a pill the arcs are most of the way round. The stroke lies on the button's border, as thick as it and 2px at least: an absolutely placed layer starts inside the border, and a stroke drawn there ran beside a border of 2px or more, two lines where there should be one.
   • 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-04.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 outline 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.