按钮点击效果必须用 :active 伪类实现，而非 :hover；需确保元素可交互、显式声明 transition 属性、适配移动端 touch-action，并配合 JS 添加状态类以补全反馈完整性。
按钮点击效果不能只靠 :hover 实现
很多人误以为 :hover 配合 transition 就能做出“点击”反馈，其实不然——:hover 响应的是鼠标悬停，不是点击瞬间。真要模拟点击态（比如按下去的凹陷、颜色突变、缩放回弹），得用 :active 伪类，且必须注意它默认只有几十毫秒的触发窗口，容易被忽略或失效。
:active + transition 的关键写法和常见失效原因
:active 要生效，前提是元素能获得焦点或处于可交互状态。按钮类元素（<button></button>、带 role="button" 的 <div>）最稳妥；纯 <code><a></a> 或 <span></span> 在某些浏览器里可能不响应 :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 类去设同样值——过渡会因属性冲突而跳变。
立即学习“前端免费学习笔记（深入）”；
transition 的 timing-function 影响点击真实感
默认的 ease 对点击反馈偏“软”，想突出按压感，改用 cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 ease-out）让变化前快后慢；若要做回弹效果（如先压再微弹），得用两个连续 transition 或 JS 控制多阶段 class ——纯 CSS 的 transition 不支持多段时序。
真正难处理的是跨浏览器一致性：Safari 对 transform + transition 在 :active 下偶有延迟，Firefox 在某些 zoom 比例下会忽略 :active 持续时间。这些细节没报错，但效果就是“点着没反应”，得靠实际真机测试才能暴露。
