button:active没反应需先确保元素被浏览器识别为可点击：用语义化<button>最稳妥；若用<div>或<span>，须加role="button"和tabindex="0"，移动端还需touch-action: manipulation及cursor: pointer。
button:active没反应？先看它有没有被浏览器识别为可点击元素
很多
必须显式声明交互意图：
- 首选语义化
<button>标签——最稳妥，无需额外补丁 - 若用
<div>或<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，否则变化就是突变。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
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形变组合
真正难的不是写出代码，而是让不同设备、不同光照、不同视力条件下的用户，都能在同一毫秒内确认“我点到了”。
