button:active没反应需先确保元素被浏览器识别为可点击：用语义化最稳妥；若用或，须加role="button"和tabindex="0"，移动端还需touch-action: manipulation及cursor: pointer。

button:active没反应？先看它有没有被浏览器识别为可点击元素

很多写了:active却没反馈，不是CSS写错了，而是浏览器压根没触发这个状态。iOS Safari尤其严格：纯<div class="btn">哪怕加了<code>onclick，默认也不走:active流程。

必须显式声明交互意图：

• 首选语义化<button></button>标签——最稳妥，无需额外补丁
• 若用<div>或<code><span></span>，得同时加role="button"和tabindex="0"
• 移动端务必加touch-action: manipulation，否则300ms延迟会卡住:active响应
• 补上cursor: pointer，部分安卓WebView靠这个“认出”可点击目标

下沉效果不能只靠translateY(2px)，得配阴影和缩放才真实

单写transform: translateY(2px)看起来像按钮“掉下去”，不是“被按下去”。物理按键下陷的关键是顶部变暗、边缘收窄、中心微凹——CSS里得靠三者联动：

• transform: translateY(2px) scale(0.98)：位移模拟下沉，缩放避免视觉漂浮
• box-shadow: 0 4px 12px rgba(0,0,0,0.3)（按下时）对比常态0 2px 6px rgba(0,0,0,0.2)：y偏移加大+模糊半径扩大，强化深度感
• 别用inset阴影模拟凹陷——它不改变空间位置，低端机还容易掉帧
• 深色模式下需单独覆盖：@media (prefers-color-scheme: dark) { .btn:active { box-shadow: 0 4px 12px rgba(0,0,0,0.4); } }

transition写在:active里完全无效，必须提前声明在常态中

:active是瞬态伪类，不是动画钩子。浏览器不会在状态切换时自动补过渡，所有要动的属性都得在基础样式里提前声明transition，否则变化就是突变。


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

正确写法示例：

button {
  transform: translateY(0) scale(1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
button:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

• 时间控制在0.06s–0.1s：PC端可用0.06s，移动端建议≥0.08s，太短像没响应
• 禁用transition: all——颜色变化触发repaint，低端安卓机明显卡顿
• 别改width/height/border-width：触发layout thrashing，直接掉帧

移动端真机调试时最容易忽略的三个细节

PC上看着好好的:active，一上真机就失效，大概率栽在这三点：

• outline: none没重置：Firefox等浏览器默认给:active加虚线框，破坏3D感
• 父容器设了pointer-events: none或overflow: hidden：后者会把translateY后溢出的阴影裁掉
• 背景太亮或按钮太小：强光屏+小尺寸设备下，单靠颜色或微位移根本感知不到——必须靠box-shadow梯度变化+transform形变组合

真正难的不是写出代码，而是让不同设备、不同光照、不同视力条件下的用户，都能在同一毫秒内确认“我点到了”。