:active不生效主因是touch-action:none阻断或选择器权重不足；需确保父级无touch-action:none、:active写在:hover后、用transform:translateY(2px)和box-shadow收缩模拟下沉，并配0.1s精准过渡。
按钮点击没下沉感，不是代码写得不对，而是:active状态根本没触发或样式被覆盖了。
为什么:active不生效
常见现象是鼠标按下去按钮纹丝不动，或者只闪一下颜色——这说明:active规则压根没跑起来。原因通常就两个：touch-action: none在父容器上堵死了激活态，或者你的:active选择器权重不够，被:hover或全局重置样式盖过去了。
- 检查按钮父级是否写了
touch-action: none（尤其在移动端框架或轮播组件里），删掉它或改成touch-action: manipulation -
:active必须写在:hover之后，否则:hover会覆盖active效果 - 别依赖
!important强行提权，优先用更具体的选择器，比如.btn-primary:active而不是button:active
下沉效果必须用transform: translateY()向下移
“下沉”不是往上跳，是视觉上被按进去了——所以transform: translateY()的值必须是正数，比如2px。配合box-shadow收缩，才能形成真实凹陷错觉。
- 默认状态加
box-shadow: 0 4px 8px rgba(0,0,0,0.2)模拟凸起 -
:active里写transform: translateY(2px)+box-shadow: 0 2px 4px rgba(0,0,0,0.15) - transition必须同时包含这两个属性：
transition: transform 0.1s ease, box-shadow 0.1s ease，分开写比all更可控
移动端点击延迟与伪类兼容性
安卓WebView和旧版iOS Safari里，:active可能只在松开手指后才触发，导致反馈滞后。这不是你代码的问题，是浏览器行为。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
cursor: pointer能提前激活部分移动端的点击态 - 避免在
:active里改background-color——颜色变化太慢，用户感知弱；位移+阴影才是主反馈 - 真要兼容极旧环境，可以加
ontouchstart空事件（<button ontouchstart="">），强制启用触摸激活
transition时间卡在0.1s最稳妥
0.1秒是人眼能分辨又不觉得卡顿的临界点。设成0.05s像没反应，0.2s开始有延迟感，尤其连续点击时会堆叠动画。
- 不要写
transition: all 0.1s——万一哪天加了font-size或opacity，动画会意外参与 - 明确列出要过渡的属性：
transition: transform 0.1s ease, box-shadow 0.1s ease - ease比linear更自然，因为按下瞬间快、回弹稍缓，符合物理直觉
真正难的不是写几行CSS，而是确认:active有没有被浏览器真正识别——先打开DevTools的Emulation面板，切到触屏模式点几下，看Styles里:active规则前面的勾是不是亮的。
