按钮点击效果必须用 :active 伪类实现，而非 :hover；需确保元素可交互、显式声明 transition 属性、适配移动端 touch-action，并配合 JS 添加状态类以补全反馈完整性。
按钮点击效果不能只靠 :hover 实现
很多人误以为 :hover 配合 transition 就能做出“点击”反馈，其实不然——:hover 响应的是鼠标悬停，不是点击瞬间。真要模拟点击态（比如按下去的凹陷、颜色突变、缩放回弹），得用 :active 伪类，且必须注意它默认只有几十毫秒的触发窗口，容易被忽略或失效。
:active + transition 的关键写法和常见失效原因
仅靠 JS 中用 立即学习“前端免费学习笔记（深入）”； 默认的 真正难处理的是跨浏览器一致性：Safari 对 :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; }
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 不支持多段时序。transform + transition 在 :active 下偶有延迟，Firefox 在某些 zoom 比例下会忽略 :active 持续时间。这些细节没报错，但效果就是“点着没反应”，得靠实际真机测试才能暴露。
