1.4 KiB
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.