Button 07

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. Sparks fly past the button, so keep overflow: hidden off the box right around it.

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="sparks"	Shards of colour fly out of the rim point the pointer struck, a glow holds for the hover, and a press bursts a ring.

   This file plays sparks. 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, sparks 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 sparks and of the glow. Options: any CSS colour.
   data-button-motion-duration	0.6	Length of the glow coming up, as six tenths of it, and of its fade, as half of it; the sparks fly at their own pace.
   data-button-motion-press	0.96	The scale of the button while it is pressed.
   data-button-motion-sparks	12	How many sparks fly at each entry; the leave throws six tenths of it and a press one and a half times.

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 sparks and of the glow. Options: any CSS colour.
   data-button-motion-duration	0.6	Length of the glow coming up, as six tenths of it, and of its fade, as half of it; the sparks fly at their own pace.	The glow snaps on and off	The glow comes up and fades slowly
   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
   data-button-motion-sparks	12	How many sparks fly at each entry; the leave throws six tenths of it and a press one and a half times.	A few sparks, a flick	A shower, and above about 30 the leave and the press start to look like confetti

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="sparks" 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-sparks="20". Three levels, least specific first: DEFAULTS, then window.ButtonMotionSettings = { sparks: 20 } 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-07.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, sparks 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: a full ring of sparks from the centre, and nothing at the leave. Enter and Space press it like a click does, and burst sparks 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 glow comes on and off at once and no spark flies, 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

   • Sparks fly past the button, up to about one button height around it, and are not clipped: a container with overflow: hidden close to the button cuts them, and a neighbour that paints later covers them.
   • 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, and the glow follows them through border-radius: inherit.
   • The colour covers the border. The glow is laid over the border box, so a dark border of 2px around a blue colour does not stay as a dark ring: the engine writes the four border widths at enter as --button-motion-bt, -br, -bb and -bl, the layer moves out by them, and border-radius: inherit is then the outer radius. A button with no border writes nothing. The glow's ring is as thick as the top border.
   • 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-07.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 sparks 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.