Press

Scales down on pointer down, springs back on release.

Live demo

The preset here changes the whole site. Slow motion and reduced motion change this stage only.

Reduced motion

Frame by frame

Every frame of the movement, on top of each other. Wide gaps are fast. Ghosts past the dashed outline are overshoot. It updates with the preset.

22 frames at 60 fps. Settles in 336 ms, no overshoot.

When to use

Every clickable element: buttons, icon buttons, links that act like buttons, and clickable cards. The press is the most frequent motion in an app, so it uses spring.fast and a small scale. It confirms the click without slowing the next one.

Give each event one feedback. A card can lift on hover and press on click, but do not add a shadow change or a color flash on top of the press.

Recipe

Every clickable element. Scales to scale.press on pointer down, back to 1 on release.

States of the press recipe
State	Property	Token	Now
rest	scale	literal	1
	tint	literal	0
pressed	scale	{scale.press}	0.964
	tint	literal	0
transition	Movement (spring)	{spring.fast}	stiffness 715 · damping 53
transition	Fade duration	{duration.fast}	132ms
transition	Fade easing	{easing.standard}	cubic-bezier(0.2, 0, 0, 1)

Tokens used

spring.fast stiffness 715 · damping 53
duration.fast 132ms
easing.standard cubic-bezier(0.2, 0, 0, 1)
scale.press 0.964

Code

/* press: Every clickable element. Scales to scale.press on pointer down, back to 1 on release.
   Use: <button class="motif-press"> */
.motif-press {
  transition:
    transform var(--motif-spring-fast-duration) var(--motif-spring-fast),
    filter var(--motif-duration-fast) var(--motif-ease-standard);
}
.motif-press:active {
  transform: var(--motif-press-transform);
  filter: var(--motif-press-filter);
}
@layer base {
  .motif-press {
    position: relative;
  }
  .motif-press::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: var(--motif-press-shadow);
    opacity: var(--motif-press-layer);
    pointer-events: none;
    transition: opacity var(--motif-duration-fast) var(--motif-ease-standard);
  }
  .motif-press:active::after {
    opacity: var(--motif-press-layer-active);
  }
}

/* Reduced motion: the variable overrides at the end of motif.css set
   travel to 0, scale to 1, and blur to 0, so this recipe needs no extra rule. */

Reduced motion

No scale. A color change (a tint layer, or brightness(0.9) in the exports) shows the press.
Fades take 132ms (duration.fast), so the state change stays visible.
Turn on the Reduced motion box under the demo to preview it, or set your system to reduce motion.