GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 button state css patterns, loading to done

· Godrich · 9 items · 20 min read

ButtonsSCSSVanilla JSReactClickLoadingConfirmCTAForms

A button state css pattern decides what a button looks like between the press and the result.

One round trip from loading to done01 btn-state-async-cycle Button that unlocks when the form is valid02 btn-state-enable-gate One button holding on and off03 btn-state-toggle-pressed Like button with a rolling count04 btn-state-like-count-roll The button becomes its own progress bar05 btn-state-download-progress Delete that only fires on a long press06 btn-state-hold-delete Primary action with other routes attached07 btn-state-split-menu Pill that slides to the chosen slot08 btn-state-segment-radio Button that says copied for a moment09 btn-state-copy-feedback

Auto-plays · click a tile to jump to its section · all nine in one zip

These nine are not ranked by popularity; they follow the order one button lives through. It gets pressed, waits for an answer, and returns (01); it explains why it cannot be pressed yet (02); it learns to stay pressed (03). The middle three are presses whose result stays on screen: as a number (04), as a few seconds of progress (05), and as something irreversible that asks you to confirm first (06). The last three are buttons that don't stand alone: one has another route bolted on beside it (07), one becomes one of three mutually exclusive slots (08), and one says what happened for a moment, then stops saying it (09). One rule runs through all nine. The current state lives in exactly one place — aria-busy, aria-pressed, aria-disabled, aria-checked, or aria-expanded, whichever fits — and the CSS reads that attribute. Keep it in two places and they will drift apart, and the half that drifts is always the half nobody can see. A button hover state css rule can only report that the pointer is nearby, so everything that happens after the press needs a state of its own. Picking the dressing before the press is what button hover effects css covers, and buttons stripped down to icons split off into Icon Button CSS Patterns.

01One round trip from loading to done

What you see

One press swaps the label for a spinner beside a "Saving" line, cuts to a check 1.2 seconds later, and returns to the original label two seconds after that. While it runs, the button is disabled, so it can't fire twice, and aria-busy says the work is in flight.

One round trip from loading to done
Open in a new tab

01 · One round trip from loading to done — Measured area 10.988% · moving frames 15/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-busysteps(1, end)setTimeout

Where to look in the code

A single function changes the state name, the ARIA flag, and the disabled flag together, so the visuals and the screen reader can never disagree.

function setState(s) {
  btn.setAttribute('data-state', s);
  btn.setAttribute('aria-busy', String(s === 'busy'));
  btn.disabled = s !== 'idle';
}
btn.addEventListener('click', function () {
  root.classList.remove('is-demo');
  clearTimeout(t1);
  clearTimeout(t2);
  setState('busy');
  t1 = setTimeout(function () { setState('done'); }, 1200);
  t2 = setTimeout(function () { setState('idle'); }, 3200);
});

02Button that unlocks when the form is valid

How button disabled state css looks on screen

Until the field holds a real address, the button sits dimmed and locked, but because it uses aria-disabled instead of disabled, it still takes keyboard focus. Press it anyway and nothing happens except a small tooltip that says why, which stays for 1.4 seconds.

Button that unlocks when the form is valid
Open in a new tab

02 · Button that unlocks when the form is valid — Measured area 15.819% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-disabledcheckValiditypointer-events

How to read the code

A truly disabled button can't be focused at all, so there is never a moment when that explanation could be read out.

function validate() {
  var ok = mail.checkValidity() && mail.value.length > 0;
  btn.setAttribute('aria-disabled', String(!ok));
  return ok;
}
btn.addEventListener('click', function () {
  root.classList.remove('is-demo');
  if (!validate()) {
    btn.setAttribute('data-why', '1');
    setTimeout(function () { btn.removeAttribute('data-why'); }, 1400);
    return;
  }
  btn.setAttribute('data-sent', '1');
});

03One button holding on and off

What moves

Two faces sit stacked in the same spot inside the button, and a selector that reads aria-pressed decides which one shows. The script does exactly one thing — flip that attribute — so the fill, the icon, and the announced state all come from the same value.

One button holding on and off
Open in a new tab

03 · One button holding on and off — Measured area 10.316% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-pressedsteps(1, end)scale

What to change

To make the bounce replay on back-to-back presses, remove the class and force a reflow before adding it again.

.tp:not(.is-demo) .tp__btn[aria-pressed="false"] .tp__face[data-face="off"],
.tp:not(.is-demo) .tp__btn[aria-pressed="true"] .tp__face[data-face="on"] { opacity: 1; }
.tp:not(.is-demo) .tp__btn[aria-pressed="true"] { background-color: $color; color: $stage-yellow; }

.tp__btn.is-pop {
  animation-name: tp-tap;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: 1;
}
@keyframes tp-tap {
  0%   { transform: scale(.94); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

04Like button with a rolling count

What you see

The number window is pinned to the height of a single line, with the old and new values stacked inside it. A like doesn't rewrite textContent; it lifts the stacked column by 22px so the new value arrives from below.

Like button with a rolling count
Open in a new tab

04 · Like button with a rolling count — Measured area 1.325% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-livetranslateYscale

Where to look in the code

Digits have to keep a fixed width or the window jitters, which is what font-variant-numeric: tabular-nums is for.

.lk__win {
  display: block;
  overflow: hidden;
  height: 22px;
  width: 46px;
}
.lk__roll { display: block; transform: translateY(0); }
.lk__n { display: block; height: 22px; font-variant-numeric: tabular-nums; }
.lk:not(.is-demo) .lk__roll { transition: transform $duration $easing; }
.lk:not(.is-demo) .lk__btn[aria-pressed="true"] .lk__roll { transform: translateY(-22px); }

05The button becomes its own progress bar

What happens on screen

The percentage lives in one variable, and both the fill width and the printed number read it. Write it as a plain --p: 0 and the browser treats the value as text, so it jumps instead of flowing from 0 to 100.

The button becomes its own progress bar
Open in a new tab

05 · The button becomes its own progress bar — Measured area 9.269% · moving frames 19/23Original by GODRICH · SCSS and React ship in the zip · See the password

@propertylinear-gradientaria-valuenow

How to read the code

Register it as an integer with @property and it interpolates; feed the same variable to counter-reset and it prints.

@property --p {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
.dl__fill {
  background-image: linear-gradient(90deg, $color 0 calc(var(--p) * 1%), transparent calc(var(--p) * 1%) 100%);
}
.dl__pct::after {
  counter-reset: p var(--p);
  content: counter(p) "%";
  font-variant-numeric: tabular-nums;
}

06Delete that only fires on a long press

What moves

Hold the button and the ring around it draws one lap through stroke-dashoffset; only a finished lap deletes anything. Let go early and the same transition rewinds, so nothing happens.

Delete that only fires on a long press
Open in a new tab

06 · Delete that only fires on a long press — Measured area 4.224% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

pointerdownstroke-dashoffsetsetPointerCapture

What to change

Without setPointerCapture on the press, sliding a finger off the button never delivers the cancel event, and the ring keeps filling on its own.

btn.addEventListener('pointerdown', function (e) {
  root.classList.remove('is-demo');
  root.setAttribute('data-state', 'idle');
  btn.setPointerCapture(e.pointerId);
  root.classList.add('is-holding');
  clearTimeout(doneTimer);
  doneTimer = setTimeout(function () { root.setAttribute('data-state', 'done'); root.classList.remove('is-holding'); }, 1200);
});
['pointerup', 'pointercancel', 'pointerleave'].forEach(function (t) {
  btn.addEventListener(t, function () { clearTimeout(doneTimer); root.classList.remove('is-holding'); });
});

07Primary action with other routes attached

What you see

It looks like one control, but there are two button elements inside one outline, and only the right-hand arrow half opens the list. The wide left half runs the most common action immediately and only ever closes the list, so it never sets aria-expanded to true.

Primary action with other routes attached
Open in a new tab

07 · Primary action with other routes attached — Measured area 24.579% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-expandedaria-haspopuptranslateY

Where to look in the code

The list itself is a role="menu" whose rows are role="menuitem", which is what keeps the same path reachable from the keyboard.

<div class="sp__group" role="group" aria-label="Send options">
  <button class="sp__main" id="sp-main" type="button">
    <span class="sp__t">Send now</span>
  </button>
  <button class="sp__more" id="sp-more" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="sp-menu" aria-label="More ways to send">
    <span class="sp__caret" aria-hidden="true"></span>
  </button>
</div>
<ul class="sp__menu" id="sp-menu" role="menu" aria-labelledby="sp-more">
  <li role="none"><button class="sp__item" type="button" role="menuitem">Schedule send</button></li>
  <li role="none"><button class="sp__item" type="button" role="menuitem">Save to drafts</button></li>
  <li role="none"><button class="sp__item" type="button" role="menuitem">Preview first</button></li>
</ul>

08Pill that slides to the chosen slot

What happens on screen

The three slots are flex: 0 0 auto and pinned to 80px, and the pill only ever moves by multiples of that number. Mix a fixed travel distance with flex: 1 1 0 and the rendered slot width no longer matches the distance you hard-coded, which lands the pill halfway onto the next label.

Pill that slides to the chosen slot
Open in a new tab

08 · Pill that slides to the chosen slot — Measured area 5.811% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-checkedflex: 0 0 autotranslateX

How to read the code

The chosen slot is recorded in aria-checked, and the text color is read from that same attribute.

.sg__pill {
  position: absolute;
  width: $segment-width;
  border-radius: $r-pill;
  transform: translateX(0);
}
.sg__seg {
  flex: 0 0 auto;
  width: $segment-width;
  height: 36px;
}
.sg:not(.is-demo) .sg__pill { transition: transform $duration $easing; }
.sg:not(.is-demo) .sg__bar[data-at="1"] .sg__pill { transform: translateX($segment-width); }
.sg:not(.is-demo) .sg__bar[data-at="2"] .sg__pill { transform: translateX($segment-width * 2); }

09Button that says copied for a moment

What moves

The label changes only once navigator.clipboard.writeText has settled, and it slips back 1.6 seconds later. Somewhere the permission will be blocked, and the user still deserves a reaction, so success and failure both run the same closing function.

Button that says copied for a moment
Open in a new tab

09 · Button that says copied for a moment — Measured area 4.763% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

navigator.clipboardwriteTextaria-live

What to change

A label that changes for a moment is visual only, which is why the same words also go out through a role="status" line.

btn.addEventListener('click', function () {
  root.classList.remove('is-demo');
  var finish = function () {
    root.setAttribute('data-copied', '1');
    clearTimeout(resetTimer);
    resetTimer = setTimeout(function () { root.removeAttribute('data-copied'); }, 1600);
  };
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(src.textContent).then(finish, finish);
  } else {
    finish();
  }
});

Where does it break?

Components that change state break at the poster image first. Every demo is sampled at 24 frames and the one that differs most from the frame before it becomes the poster, and the first cut of 07 opened its menu in the loop and then closed it again. A menu leaving the screen always changes more pixels than a menu arriving, so the poster came out as an orange field with a closed button sitting in it. The fix was to stop closing the menu in the loop at all: open it once at 8%, leave it open, drop the rows in with a staggered translateY, then walk a background color down them. That reads as 24.58% changed area over 12 of 23 frames, and the poster is now the open list.

The second trap is a fight between cuts and frame count. Cutting a state change with steps(1, end) kills the half-transparent ghost frame, but a cut only ever produces two frames of difference. So every one of the nine carries a small transform-driven motion alongside its cut: a spinner that keeps turning in 01, a scale bounce in 03, a ring that expands only at the moment of copying in 09. Item 09 also splits its return, cutting the icon at 76% and the color and label at 84%. The return has to change less than the arrival, or the poster lands on the wrong half of the story. The third trap is one that no amount of staring would catch. The loop in 02 reveals a fake typed address with steps(8, end), and at a width of 108px the last character was sliced in half and read [email protected]. Only at 120px did the address come out whole. When the wait needs to spin instead of resolve, CSS Loading Spinners shrinks that job to a single div. The password for the archive with all nine sources is sqph35dy, and the numbers fixed here are the ones inside it.

The fourth trap is size. A 320×200 stage leaves 174px of vertical room once padding is gone, and the menu in 07 is absolutely positioned, so it never counts toward its parent's height. The stage looks fine while the document height quietly grows and the grid cell sprouts a scrollbar, which is why the wrapper reserves padding-bottom equal to the height of the open list. On narrow screens that reservation drops from 116px to 100px. Values inside a narrow-screen media query get rounded down, never up.

Accessibility and reduced-motion

With prefers-reduced-motion: reduce on, all nine stop the autoplay loop and leave the current state exactly where it is. The spinner in 01 stops turning, the fill in 05 stands empty, and the ring in 06 arrives full in one step instead of growing. Nothing in the attribute layer is switched off on either path.

Item Mouse Keyboard Where the state is written
01 Async cycle Click Enter · Space aria-busy · disabled
02 Enable gate Click Tab keeps focus aria-disabled · aria-describedby
03 Toggle Click Enter · Space aria-pressed
04 Like Click Enter · Space aria-pressed · aria-live
05 Progress Click Enter · Space role="progressbar" · aria-valuenow
06 Hold Press and hold Enter · Space role="status"
07 Split Click either half Tab · Escape aria-expanded · aria-haspopup
08 Segments Click ← → arrows role="radio" · aria-checked
09 Copy Click Enter · Space aria-live="polite"

Why a pressed state belongs in an attribute rather than a class is spelled out in the MDN page on aria-pressed. The registration that 05 depends on is documented in the MDN page on @property, including the detail that leaving out syntax throws the whole registration away. Components that start because someone pressed them live in the click category, and buttons meant to be the one thing pressed on a page live in the CTA category.

FAQ

Should a locked button use disabled or aria-disabled?

Use aria-disabled when you have a reason to give, and disabled when you don't. A real disabled button can't receive focus, so the keyboard never reaches it and the explanation wired up through aria-describedby is never announced. The trade-off is that aria-disabled doesn't stop the click for you, so the handler has to return early on its own. Keeping just the press itself in one line is the short version CSS Button Click Feedback Effects carries.

How long should a css button click effect hold its finished state?

Two seconds is enough. Item 01 answers in 1.2 seconds, holds the check for two, and then returns; any shorter and the result gets missed, any longer and the next action feels blocked. When the response time is unknown, switch to the finished state the moment the response lands and put only the finished display on a fixed timer.

Can all nine live in one project?

They can, because each item carries its own class prefix. The one shared name is @property --p in 05, which is registered document-wide, so a second registration elsewhere with a different syntax wins simply by coming later. If you're planning several progress buttons, rename it to something like --dl-p so the registration belongs to the component.

Enter the archive password

The password is inside this article. You will find it as you read.