按钮点击无反馈应先检查 cursor 和 :active 是否被覆盖；显式定义 button:active、添加 cursor: pointer、使用 transform/opacity 等可动画属性；移动端需用 touch-action: manipulation 消除 300ms 延迟，并通过 JS 监听 mousedown/touchstart 等事件确保一致按压反馈。
按钮点击时没反馈？先检查 cursor 和 :active 是否被覆盖
很多所谓“没点击效果”的问题，其实只是视觉上没变化，但浏览器默认的 :active 状态本就只持续几十毫秒，且容易被 CSS 重置掉。常见坑是全局写了 * { outline: none; } 或重置了所有伪类样式，导致 button:active 完全失效。
实操建议：
- 在按钮样式里显式写
button:active { transform: scale(0.98); }（别依赖默认） - 确保没用
!important覆盖掉:active规则 - 加一句
button { cursor: pointer; }，避免鼠标悬停时仍是文本光标，降低用户点击意愿
用 transition 做平滑缩放或颜色变化，但别对 display 或 height 动画
transition 只能作用于可计算的数值型属性，比如 transform、opacity、background-color。对 display: none → block 或 height: 0 → 24px 加 transition 是无效的——浏览器根本不会触发过渡。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 缩放动画：用
transform: scale(1) → scale(0.95)，配合transition: transform 0.1s ease - 背景色渐变：确保起始和结束色都用
rgb()或hsl()，避免#fff → #000这种十六进制跳变（部分老浏览器不支持） - 如果要“压下感”，优先用
transform: translateY(1px)，比改padding更轻量
需要真实按压反馈？得监听 mousedown / mouseup 事件
CSS 的 :active 在触摸屏上兼容性差（iOS Safari 默认 300ms 延迟，且长按可能不触发），真要一致体验，必须靠 JS 控制 class。
示例逻辑：
const btn = document.querySelector('button');
btn.addEventListener('mousedown', () => btn.classList.add('is-pressed'));
btn.addEventListener('mouseup', () => btn.classList.remove('is-pressed'));
btn.addEventListener('mouseleave', () => btn.classList.remove('is-pressed')); // 防止拖出后卡住
对应 CSS 写 .is-pressed { transform: translateY(1px) scale(0.98); } 即可。注意别漏掉 mouseleave，否则鼠标划出再点别的地方，按钮会一直保持按压态。
移动端点击有 300ms 延迟？加 touch-action: manipulation
iOS Safari 和部分安卓浏览器为双击缩放保留延迟，导致按钮点击明显滞后。这不是 JS 能解决的，得靠 CSS 层面声明。
直接加这一行就能干掉延迟：
button {
touch-action: manipulation;
}
补充说明：
- 这个属性对桌面端无影响，安全可用
- 它同时禁用双击缩放和滚动惯性，所以只加在明确是按钮/开关的元素上
- 如果按钮内含文字链接或嵌套可滚动区域，慎用——可能误伤交互
真正难的不是做动画，而是让缩放、位移、颜色变化在不同设备上同步触发，且不干扰表单提交或键盘焦点。很多人卡在 iOS 上 :active 不生效，却去调 JS 的 click 事件，其实换 touchstart + touchend 就行，但得处理 touchcancel。
