Home / Snippets / Animation /

Squish/press

Click and hold the pill: it dips with scale(0.96) on :active while the shadow collapses, mimicking a physical press.

Widely Supported

:activetransform

Quick implementation

.squishpress-card {
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.squishpress-card:active {
  transform: scale(0.96);
  box-shadow: 0 0 0 …;
}

Prompt this to your LLM

Buttons and chip triggers.

You are adding press feedback to a button.

Goal: on :active, scale down to ~0.96 and reduce depth shadow; fast transition (~80ms).

Constraints:
- prefers-reduced-motion: no scale change (optional: opacity only).
- Keep transform-only for perf.

Return CSS.

Why this matters in 2026

Micro interaction on press confirms input on touch and pointer devices—especially when network latency follows.

The logic

Pairing scale with shadow loss sells depth; the motion is short so it reads as mechanical, not decorative.

Accessibility & performance

Skip or soften the effect under reduced motion; ensure focus styles remain visible after click.