如何用CSS3的:active伪类增强移动端按钮按压反馈质感？-css教程-PHP中文网

iOS Safari 中 button:active 不触发需同时设置 touch-action: manipulation 和 tabindex="0"，并用 transform 与 inset box-shadow 实现可感知按压效果，transition 必须定义在常态规则中。

如何用css3的:active伪类增强移动端按钮按压反馈质感？

button:active 在 iOS Safari 上不触发？先加 touch-action 和 tabindex

移动端最常遇到的问题不是样式写错，而是浏览器压根没把元素当可点击目标处理。iOS Safari 默认跳过 div 或 span 的 :active，哪怕绑了 onclick 也没用。

必须显式声明交互意图：

首选语义化 —— 它自带 tabindex="0"、可聚焦、默认响应 :active
若必须用 div，得同时加 role="button" 和 tabindex="0"
在按钮选择器里加 touch-action: manipulation，禁用 300ms 延迟判断，否则 :active 被卡住或延迟生效
顺手加上 cursor: pointer（桌面端 fallback）和 -webkit-tap-highlight-color: transparent，避免点击时闪一层灰色高亮膜，盖掉你的按压效果

只改 background-color 是无效反馈

人在强光屏、小尺寸设备或深色背景上，根本看不出 background-color 变深 10%。真正可感知的“被按下”，依赖形变与光影梯度变化。

有效组合是：

transform: scale(0.96) 或 transform: translateY(1px) —— 缩放比位移更稳，iOS 上 translateY 有时触发重排闪烁
box-shadow: inset 0 1px 2px rgba(0,0,0,0.15) —— 注意 inset 关键字不能漏，模拟受压内阴影
常态下补一句 box-shadow: 0 2px 6px rgba(0,0,0,0.15)，营造“凸起”感，形成对比
深色模式需单独覆盖：@media (prefers-color-scheme: dark) { .btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); } }

transition 写在 :active 里完全没用

:active 是状态，不是动画钩子。过渡必须定义在常态规则中，且所有要过渡的属性都得有明确初始值，否则浏览器无法插值。

正确写法示例：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

button {
  transform: scale(1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
button:active {
  transform: scale(0.96);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}

注意几点：