:active伪类可实现按钮点击反馈，需配合transform缩放或位移、transition动画及移动端兼容处理，避免无响应或样式卡顿。
用 :active 伪类可以轻松实现按钮点击时的按压反馈，关键是控制样式变化的时机和幅度，让视觉反馈自然、及时。
基础写法：设置 active 状态的样式
给按钮添加 :active 样式，通常调整 transform（如缩放或位移）、background-color 或 box-shadow，模拟被按下的效果：
- 用
transform: scale(0.98)让按钮轻微缩小，最常用也最符合直觉 - 用
transform: translateY(2px)模拟下陷感，配合box-shadow: inset效果更佳 - 避免只改文字颜色或边框——变化太弱，用户感知不到点击响应
必须加 transition 才有平滑效果
:active 本身是瞬时状态，不加过渡动画会“闪一下”就消失。要在按钮的默认样式中提前定义 transition：
- 推荐写在按钮基础样式里，例如：
transition: all 0.15s ease; - 不要只写
transition: transform 0.1s;—— 如果还改了背景色，没包含进去就会突变 - 时间控制在 0.1s–0.2s 之间，太长显得迟钝，太短像没反应
移动端要注意 active 失效问题
部分 iOS Safari 和老版安卓浏览器默认不触发 :active，需手动启用：
立即学习“前端免费学习笔记（深入）”；
- 给
或按钮父容器加cursor: pointer; - 或者在
中加<meta name="viewport" content="width=device-width, user-scalable=no"> - 更稳妥的做法：同时监听
touchstart/touchend动态加 class，但纯 CSS 场景优先用上面两个技巧
避免常见坑：active 不生效或卡住
如果点击后样式没变，或松手后没恢复，大概率是这些原因：
- 按钮没有可交互属性（比如是
<div> 但没加 <code>tabindex="0"或role="button"） - 父元素设置了
pointer-events: none，拦截了事件 -
:active的样式被更高优先级的选择器覆盖（检查 DevTools 中是否被划掉） - 用了
transform: scale()但父容器有overflow: hidden，导致缩放后被裁剪
