按压反馈
Press Feedback
手指按下的瞬间按钮缩小、变暗，松开立刻弹回，确认这一下点到了。
- 又叫：
- 按下缩放
- 点击回弹
- 按压态
- 按下反馈
- button press effect
- active state scale
- 展厅
- 交互反馈
- 形态
- 固定舞台
- 播放
- 手动触发
- 关键词
- 纯 CSS / 合成层动画 / 键盘可用 / 可以直接用
参数工作台
复制给 AI
随参数实时更新给按钮加按压反馈（press feedback）：按住时用 transform: scale(0.96) 缩小，过渡 110ms；松开回到 scale(1)，缓动 cubic-bezier(0.34, 1.56, 0.64, 1)。回弹可以轻微过冲，但别超过 1.0 太多。按下用 :active 或 pointerdown，同时给键盘用户保留 :focus-visible 描边。按钮不能因此改变尺寸。
button press feedback, :active { transform: scale(0.96); transition: transform 110ms }, release back to scale(1) with cubic-bezier(0.34, 1.56, 0.64, 1), slight overshoot spring, transform-only, keep :focus-visible ring, touch-action: manipulation
https://publieople.github.io/design-museum/entry/press-feedback/?stage=light
链接带着你调好的参数
什么时候用
- 按钮、图标按钮需要即时确认，别让人怀疑刚才点没点到
- 提交类按钮想减少连点，先用按下反馈把动作锁住一下
- 移动端点击区域小，用触感替代的视觉反馈补足
适用场景：按钮 / 表单 / 导航
推荐取值
- 按下缩放
- 0.94–0.97
- 按下时长
- 80–150ms
- 回弹时长
- 150–200ms
- 缓动
- ease-out；回弹用 cubic-bezier(0.34, 1.56, 0.64, 1)
别搞混
和「悬停抬升（hover lift）」的区别
悬停是移入之后一直保持的状态，用 :hover；按压只在按住那一瞬出现、松开就结束，用 :active。按住不放时两者会同时成立。
和「加载状态（loading）」的区别
按压反馈是几十毫秒内的即时回应，请求还没发出去；loading 要持续到请求返回。正确的顺序是先按压、再 loading，而不是同时出现。
容易踩的坑
- :active 只在按住期间生效；键盘用空格或回车触发的是 click，不会走 :active，别把按压态当成键盘反馈
- iOS Safari 上 :active 需要元素可交互才会稳定触发，给按钮加 touch 事件监听或 cursor: pointer 更保险
- 用 width/height 缩小会重排，要用 transform: scale()
- 回弹过冲太大（明显超过 1.0）会显得廉价，回到 1.0 附近就够
无障碍降级
prefers-reduced-motion: reduce 下去掉缩放过渡，按下时只改底色或亮度并瞬时切换，回弹取消。
关键词
- :active
- transform: scale()
- transition
- touch-action
- press state
- :focus-visible