Morphing Submit Button
A submit button that collapses into a spinner pill, then expands into a success state with a stroke-drawn checkmark.
About This Component
A form submit button that answers the click instead of freezing. The label lifts away, the button narrows into a circular spinner, and when the request lands it expands again into a success fill with a checkmark drawn stroke-first and a new label. An error path shakes the button, recolours it and puts the reason in a live region.
Read the full effect overview
One self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and GSAP core, no framework and no DrawSVG. Ships in three looks, vault, brutal and glass, switched by a single data-variant attribute.
What's Included
- Width and border-radius morph from button to spinner pill and back
- Checkmark drawn by tweening strokeDashoffset, no DrawSVG plugin needed
- Error path shakes on x, recolours and restores itself
- Disabled and aria-busy for the whole request, so double submits are impossible
- Every state change announced through an aria-live status line
- Still a working button type=submit with JavaScript switched off
- Reduced motion switches states instantly instead of animating
- Three shipped variants: vault, brutal, glass
Perfect For
- Sign-up and checkout forms where the wait needs covering
- Save and publish buttons in dashboards and admin tools
- Newsletter and waitlist captures on marketing pages
- Any single-action form that currently shows a spinner beside the button
How It Works
Width, not scale
On submit the label fades up and out while the button tweens its width down to its own height and its border-radius to half of that, which lands exactly on a circle whatever the variant's resting radius is. Nothing in the CSS sets a transform on the button, so the error shake on x starts and finishes at a real zero.
Drawing the checkmark
The tick is one SVG path. Its length is read once with getTotalLength, then strokeDasharray and strokeDashoffset are both set to that length so the stroke is fully retracted. GSAP tweens strokeDashoffset to 0 and the line draws itself. That is the whole trick, and it needs no plugin.
Colours come from the variant
The success and error fills are read from the --btn-success-bg and --btn-error-bg custom properties with getComputedStyle at the moment each tween starts, never hard-coded in the script, so switching data-variant mid-demo produces the right colour on the next run.
State machine and accessibility
A busy flag rejects a second submit, the button carries disabled and aria-busy for the duration, and each stage writes a sentence into an aria-live polite status line. Under prefers-reduced-motion every duration collapses to zero, so the states still happen in order with no motion.