Press Feedback
按压反馈
Aliases:点击反馈按钮缩一下按下缩放按压缩小tap feedbackactive scale
What is it
When users press a clickable element it scales down slightly (typically 0.95–0.98) and springs back on release. A few tens of milliseconds that make a UI feel like physical buttons instead of flat web pages.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- All tappable elements — buttons, cards, icon buttons
- Touch-first interfaces where pressing is the primary gesture
- Products aiming for a tactile feel
✕ When not to use
- Very large tap areas — scaling the whole card makes text wobble
- Small inline actions inside rows — avoid whole-row jitter
- When stronger feedback already exists — avoid stacking effects
Variants
Scale
缩放
Most common, scale(0.96)
Scale + shadow
缩放 + 阴影收紧
Tighten shadow simultaneously to simulate pressing
Darken
变暗
No scaling; dim instead — suits desktop
Implementation
transform: scaletransition:activeUse the :active pseudo-class with `transition: transform 80ms`; relax to ~150ms on release for a spring feel. Pure CSS suffices. On touch devices, :active can be flaky — add a touchstart listener or handle -webkit-tap-highlight.
Compare
Full comparison →| Press Feedback按压反馈 | Button按钮 | |
|---|---|---|
| Intensity | Medium, restrained | Low to medium — a subtle sink is enough |
| Mobile friendly | Good — triggers on press | Good — keep touch targets ≥ 44px |
| Best for | Buttons / small cards | Buttons / small clickable blocks |
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add unified press feedback to all clickable elements in the current project. Check for existing global button styles first and stay consistent. Requirements: - scale(0.96) + tightened shadow on press; 80ms down, 150ms back - Cover the Button component and clickable cards - Reliable on touch devices - Respect prefers-reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
On hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
MotionSimilarAs the cursor approaches, the button is pulled toward it like iron to a magnet, then springs home on leave. The offset is computed from cursor-to-center distance and usually clamped to 8–20px. A tactile desktop flourish common on portfolios and creative sites.
MotionSimilarA translucent circle expands from the exact tap point and fades out, visualising where the press landed. Material Design's signature press feedback — it gives clicks a physical sense, like a stone dropped on water.
MotionSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAlternative