20 lines
1.4 KiB
Markdown
20 lines
1.4 KiB
Markdown
# Button Press Feedback Design
|
|
|
|
## Context
|
|
|
|
Buttons currently change on hover, but many provide little or no visible acknowledgment while the pointer is pressed. The interface mixes a shared Base UI button with native buttons, so changing only the shared component would leave inconsistent behavior.
|
|
|
|
## Chosen interaction
|
|
|
|
Apply one CSS press vocabulary to every enabled native button. During `:active`, the button compresses to `scale(0.97)`, loses raised shadow, and receives a restrained brightness change. The transition lasts 140 ms and uses an ease-out-quint curve (`cubic-bezier(0.22, 1, 0.36, 1)`). This reads as a physical press without bounce, ripple, layout movement, or JavaScript state.
|
|
|
|
The existing one-pixel translation on the shared button is removed so shared and native buttons do not combine two motion patterns.
|
|
|
|
## Accessibility
|
|
|
|
Under `prefers-reduced-motion: reduce`, scale is disabled. The brightness and shadow change remain, providing a clear pressed state without kinetic motion. Disabled buttons receive no press treatment.
|
|
|
|
## Verification
|
|
|
|
A focused contract test checks the global enabled-button selector, scale, timing, easing, and reduced-motion override. The full frontend suite and typecheck guard regressions. Playwright then holds a real button in the active state and confirms its computed transform, followed by a visual screenshot/snapshot check.
|