按钮点击效果必须用 :active 伪类实现，而非 :hover；需确保元素可交互、显式声明 transition 属性、适配移动端 touch-action，并配合 JS 添加状态类以补全反馈完整性。
按钮点击效果不能只靠 :hover 实现
很多人误以为 :hover 配合 transition 就能做出“点击”反馈，其实不然——:hover 响应的是鼠标悬停，不是点击瞬间。真要模拟点击态（比如按下去的凹陷、颜色突变、缩放回弹），得用 :active 伪类，且必须注意它默认只有几十毫秒的触发窗口，容易被忽略或失效。
:active + transition 的关键写法和常见失效原因
:active 要生效，前提是元素能获得焦点或处于可交互状态。按钮类元素（、带 role="button" 的
）最稳妥；纯
:active。过渡属性也必须明确指定，不能只写 transition: all .2s ——部分浏览器对 all 的兼容性差，且会意外过渡不需要的属性（比如 outline）。
- 务必显式声明要过渡的属性：
transition: background-color .15s, transform .1s -
:active中的transform建议用scale(0.95)或translateY(1px)，避免用top/left（触发布局重排） - 移动端需加
touch-action: manipulation，否则:active在 iOS Safari 上可能不触发 - 如果用了
pointer-events: none或父级有overflow: hidden且裁剪了按钮，:active也会失效
如何补全点击反馈的完整性
仅靠 :hover 和 :active 无法记录“已点击”状态，比如切换开关、标记已提交。这时需要 JS 配合添加 class，再用 CSS 过渡该 class 的样式。例如：
.btn { transition: background-color .2s, opacity .15s; }
.btn:active { background-color: #4a5568; }
.btn.clicked { opacity: 0.7; }
JS 中用 element.classList.add('clicked') 触发，后续可移除或替换为其他状态类。注意：不要在 :active 里写 opacity: 0.7 后又用 JS 加 clicked 类去设同样值——过渡会因属性冲突而跳变。
立即学习“前端免费学习笔记（深入）”；
