Checkout button: play, then purple

Parameter sheet and starting presets for the click animation

Frontend prototype notes

Total duration760 msdefault preset
Purple reached540 ms70% of the run
Peak squish0.94xscale at press
Final color#7C3AEDviolet-600

What happens on click

The button runs four overlapping phases. The play animation is the icon morph (cart to play triangle to check). The purple fill starts before the morph ends, so the color change feels like part of the motion and not an afterthought.

Animation timeline (ms)
Animation timeline (ms)Range chart, 4 rows on a number axis. Press squish: 0 to 90; Play icon morph: 60 to 420; Fill to purple: 300 to 540; Settle and check: 540 to 760. Target purple at 540.0200400600800Press squishPress squish: 0 to 90Play icon morphPlay icon morph: 60 to 420Fill to purpleFill to purple: 300 to 540Settle and checkSettle and check: 540 to 760purple
Animation timeline (ms)Range chart, 4 rows on a number axis. Press squish: 0 to 90; Play icon morph: 60 to 420; Fill to purple: 300 to 540; Settle and check: 540 to 760. Target purple at 540.05001,000Press squishPress squish: 0 to 90Play icon morphPlay icon morph: 60 to 420Fill to purpleFill to purple: 300 to 540Settle and checkSettle and check: 540 to 760purple
Data
phasestartend
Press squish090
Play icon morph60420
Fill to purple300540
Settle and check540760
  1. Press: button scales down to the peak squish value.
  2. Play: the cart icon morphs into a play triangle, then a check mark.
  3. Fill: the background sweeps from the brand blue to purple, left to right.
  4. Settle: scale returns to 1.0 with a small overshoot, then the label reads "Paid".

Parameters to tune

Each row is one control you would want a slider or dropdown for. Change one at a time and keep the rest at default.

parameterdefaultminmaxstepunitwhat it changes
Press scale0.940.851.000.01xhow hard the button squishes
Press duration904020010msspeed of the squish
Icon morph duration36015070010mslength of the play animation
Fill delay300050010mswhen purple starts relative to click
Fill duration24010060010mshow quickly it turns purple
Overshoot1.041.001.120.01xbounce past 1.0 when settling
Stagger60012010msgap between icon layers
optionchoicesdefault
Easingease-out, ease-in-out, spring, linearspring
Fill directionleft to right, center out, top downleft to right
Icon sequencecart > play > check, cart > check, play onlycart > play > check
Purple shade#7C3AED, #8B5CF6, #6D28D9#7C3AED
Reduced motioninstant swap, fade onlyfade only

Easing curves compared

Progress of the fill (0 to 100) over its duration, sampled at 10 steps. Spring overshoots past 100 and settles; that overshoot is what reads as "playful".

Fill progress by easing
Fill progress by easingLine chart, 11 values of step. ease-out goes from 0% (0) to 100% (10); highest 100% at 9, lowest 0% at 0. ease-in-out goes from 0% (0) to 100% (10); highest 100% at 10, lowest 0% at 0. spring goes from 0% (0) to 100% (10); highest 110% at 4, lowest 0% at 0. linear goes from 0% (0) to 100% (10); highest 100% at 10, lowest 0% at 0.0%25%50%75%100%125%0 · ease-out: 0%1 · ease-out: 27%2 · ease-out: 49%3 · ease-out: 66%4 · ease-out: 79%5 · ease-out: 88%6 · ease-out: 94%7 · ease-out: 97%8 · ease-out: 99%9 · ease-out: 100%10 · ease-out: 100%0 · ease-in-out: 0%1 · ease-in-out: 5%2 · ease-in-out: 18%3 · ease-in-out: 35%4 · ease-in-out: 50%5 · ease-in-out: 65%6 · ease-in-out: 78%7 · ease-in-out: 88%8 · ease-in-out: 95%9 · ease-in-out: 99%10 · ease-in-out: 100%0 · spring: 0%1 · spring: 22%2 · spring: 58%3 · spring: 92%4 · spring: 110%5 · spring: 108%6 · spring: 103%7 · spring: 100%8 · spring: 100%9 · spring: 100%10 · spring: 100%0 · linear: 0%1 · linear: 10%2 · linear: 20%3 · linear: 30%4 · linear: 40%5 · linear: 50%6 · linear: 60%7 · linear: 70%8 · linear: 80%9 · linear: 90%10 · linear: 100%ease-outease-in-outspringlinear012345678910
Fill progress by easingLine chart, 11 values of step. ease-out goes from 0% (0) to 100% (10); highest 100% at 9, lowest 0% at 0. ease-in-out goes from 0% (0) to 100% (10); highest 100% at 10, lowest 0% at 0. spring goes from 0% (0) to 100% (10); highest 110% at 4, lowest 0% at 0. linear goes from 0% (0) to 100% (10); highest 100% at 10, lowest 0% at 0.0%50%100%150%0 · ease-out: 0%1 · ease-out: 27%2 · ease-out: 49%3 · ease-out: 66%4 · ease-out: 79%5 · ease-out: 88%6 · ease-out: 94%7 · ease-out: 97%8 · ease-out: 99%9 · ease-out: 100%10 · ease-out: 100%0 · ease-in-out: 0%1 · ease-in-out: 5%2 · ease-in-out: 18%3 · ease-in-out: 35%4 · ease-in-out: 50%5 · ease-in-out: 65%6 · ease-in-out: 78%7 · ease-in-out: 88%8 · ease-in-out: 95%9 · ease-in-out: 99%10 · ease-in-out: 100%0 · spring: 0%1 · spring: 22%2 · spring: 58%3 · spring: 92%4 · spring: 110%5 · spring: 108%6 · spring: 103%7 · spring: 100%8 · spring: 100%9 · spring: 100%10 · spring: 100%0 · linear: 0%1 · linear: 10%2 · linear: 20%3 · linear: 30%4 · linear: 40%5 · linear: 50%6 · linear: 60%7 · linear: 70%8 · linear: 80%9 · linear: 90%10 · linear: 100%012345678910
Data
stepease-outease-in-outspringlinear
00%0%0%0%
127%5%22%10%
249%18%58%20%
366%35%92%30%
479%50%110%40%
588%65%108%50%
694%78%103%60%
797%88%100%70%
899%95%100%80%
9100%99%100%90%
10100%100%100%100%

Starting presets

Snappy

Press 0.96, morph 220 ms, fill delay 180 ms, fill 160 ms, ease-out. Total about 480 ms. Feels like a native control.

Playful (default)

Press 0.94, morph 360 ms, fill delay 300 ms, fill 240 ms, spring with 1.04 overshoot. Total 760 ms.

Theatrical

Press 0.90, morph 520 ms, fill delay 380 ms, fill 360 ms, spring with 1.08 overshoot. Total about 1000 ms. Fun once, tiring on the third purchase.

Parameters that worked

Fill this block in after trying values, then copy it from here (select the block; there is no copy button). This is the default preset as a starting point.

.checkout-btn {
  --press-scale: 0.94;
  --press-ms: 90ms;
  --morph-ms: 360ms;
  --fill-delay-ms: 300ms;
  --fill-ms: 240ms;
  --overshoot: 1.04;
  --stagger-ms: 60ms;
  --easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fill-color: #7C3AED;
}
{
  "pressScale": 0.94,
  "pressMs": 90,
  "morphMs": 360,
  "fillDelayMs": 300,
  "fillMs": 240,
  "overshoot": 1.04,
  "staggerMs": 60,
  "easing": "spring",
  "fillDirection": "left-to-right",
  "color": "#7C3AED"
}

Review checklist

Back to the examples