:active 在按下瞬间生效而非点击后，需确保元素可激活、解除移动端300ms延迟、样式变化及时明显；必用 transform 缩放+内阴影+精准 transition，真机多环境验证。

:active 本身不“点击后”生效，它只在按下瞬间存在；所谓“触感反馈”其实是靠视觉变化让人脑补出“被按下去”的物理感，关键不在写法多炫，而在变化是否足够及时、明显、符合直觉。

为什么按钮点了没反应？先查这三件事

不是 :active 写错了，而是它根本没被浏览器认作可激活元素：

• 元素没声明交互意图：用 <div> 或 <code><span></span> 做按钮，必须加 role="button" tabindex="0"，否则 iOS Safari 直接跳过 :active
• 移动端被默认策略拦住：iOS Safari 会等 300ms 判断是否双击，导致首次触摸延迟响应；加 touch-action: manipulation 能提前告诉浏览器“这是单点操作，别等”
• 样式被覆盖或压根没触发重绘：比如只改 color，但按钮文字在深色背景上变浅后几乎看不出；或者父容器设了 overflow: hidden，把缩放后的边缘切掉了

真正有效的按压反馈，只改 background-color 是不够的

人眼对位置和形变比颜色更敏感，纯色变化容易被忽略，尤其在强光或小屏设备上：

• 必加 transform: scale(0.96) 或 transform: translateY(1px) —— 缩放比位移更稳妥，iOS 上 translateY 有时会触发重排闪烁
• 配合 box-shadow: inset 0 1px 2px rgba(0,0,0,0.15) 模拟受压阴影，比单纯变暗背景更有“下陷感”
• 所有动画属性必须在常态选择器里加 transition，例如 button { transition: transform 0.06s, background-color 0.08s; }；写在 :active 里无效
• 避免用 opacity：安卓低端机上可能卡顿，且透明度变化不如位移直观

移动端必须加 ontouchstart="" 吗？

不一定，但加了最省心：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

立即学习“前端免费学习笔记（深入）”；

• 如果元素已是 <button></button> 或带 onclick，多数 Android 浏览器能自动启用 :active，iOS Safari 仍可能首触延迟
• ontouchstart=""（空字符串）是轻量级兜底方案，不绑定函数，只起“声明用途”作用，兼容 iOS 12–17 所有版本
• 微信内置浏览器（X5 内核）和 QQ 浏览器对 :active 支持极不稳定，哪怕用了 role="button" + tabindex，加上 ontouchstart="" 仍是最低成本的保底手段
• 不要用 cursor: pointer 做判断依据——它在移动端无实际作用，旧版 iOS 可能偶然触发，但不可靠

transition 时间设多少才不卡也不飘？

太慢像卡顿，太快像没动，毫秒级差异直接影响感知：

• transform 过渡控制在 0.04s–0.07s：缩放或位移需要快速响应，超过 0.08s 就开始有“迟滞感”
• background-color 可稍长，但别超 0.12s：颜色渐变更容察觉，但过长会让用户误以为按钮卡死
• 绝对不要写 transition: all 0.2s：万一哪天加了 height 或 display，直接触发重排，页面卡顿
• 真机测试时重点看 iOS 设备：Safari 15.4+ 对非原生可点击元素的 :active 响应做了进一步限制，模拟器测不出来

最麻烦的从来不是写几行 CSS，而是你改完自测觉得“挺顺”，结果用户在 iPhone 12 上微信里点三次才看到一次反馈——不同内核、不同系统版本、不同手势习惯，让 :active 成了前端里少数几个必须真机多环境点按验证的细节。