按钮按压反馈最直接方式是用:active伪类实现位移+阴影收缩效果，配合transition实现自然回弹，需确保语义化元素、移动端启用点击态且避免阻塞默认行为。
按钮按下去有按压反馈，最直接的方式就是用 :active 伪类控制点击瞬间的样式变化。它会在鼠标按下（或触屏触摸）时立即生效，松开后自动恢复，无需 JavaScript，轻量又可靠。
基础按压效果：位移 + 阴影收缩
视觉上模拟“被按下去”的感觉，关键在于让按钮看起来略微下沉。常用手法是减小 box-shadow 的偏移量、同时配合 transform: translateY() 向下微移（注意：是向下移才显“压入”，别反了）。
-
向下位移：比如正常状态
transform: translateY(0)，:active中设为transform: translateY(2px) -
阴影变短变实：如正常有
box-shadow: 0 4px 8px rgba(0,0,0,0.2)，按下时改为box-shadow: 0 2px 4px rgba(0,0,0,0.15) - 配色微调（可选）：背景色稍变深、文字色稍变暗，增强对比和“受力感”
确保 :active 生效的几个前提
:active 不是总能触发，尤其在移动端或某些浏览器中容易失效，需注意以下几点：
-
必须有可交互行为：按钮最好带
role="button"或使用语义化<button>元素，避免仅用<div>+ click 事件 -
移动端需启用点击态：iOS Safari 默认禁用非可点击元素的
:active，加cursor: pointer或touch-action: manipulation可修复 -
不要阻塞默认行为：如果 JS 中用了
event.preventDefault()且没做样式补偿，:active可能一闪而过甚至不触发
进阶技巧：配合 transition 实现自然过渡
:active 本身是瞬时切换，加上 transition 才有“按下去—回弹”的柔和感。注意只对需要动画的属性加过渡，避免全写 all 引发性能问题。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
transition: transform 0.1s ease, box-shadow 0.1s ease; - 位移和阴影用
ease或cubic-bezier(0.4, 0, 0.2, 1)更接近物理回弹 - 别忘了在默认状态（非
:active）也写好transition，否则松开时不会平滑还原
兼容性与备选方案
:active 在所有现代浏览器中都支持良好，IE9+ 也没问题。唯一要注意的是，在部分安卓 WebView 或旧版微信内置浏览器中，若父容器有 overflow: hidden 或 -webkit-overflow-scrolling: touch，可能截断按压动画。此时可：
- 临时去掉溢出隐藏，或改用
transform: scale(0.98)替代位移 - 极简场景下，用
:focus:active组合兜底（适合键盘操作） - 完全不想依赖伪类？可用 JS 切换 class（如
is-pressed），但没必要——:active足够好用
基本上就这些。用好 :active + transform + transition 这三样，按钮的按压反馈既真实又轻量，用户一按就懂，体验立马扎实起来。
