按钮点击无动画响应，需检查 pointer-events、disabled、父元素遮挡及 :active 权重；缩放卡顿因缺少 transition，应设于常态规则中；兼容 IE9/10 需 JS 模拟；布局抖动可调 transform-origin、用 padding 替代 height。

按钮按下时没反应？检查是否被 pointer-events 或 disabled 阻断

很多情况下写好了 :active 样式，但点击按钮毫无动画——大概率是按钮本身不可交互。常见干扰因素有：pointer-events: none、disabled 属性、父元素遮挡（如透明 overlay）、或 CSS 中 :active 选择器权重不足被覆盖。

• 用浏览器开发者工具检查按钮的 computed styles，确认 pointer-events 是 auto，且没有 disabled
• :active 必须写在 :hover 之后才可能生效（否则会被覆盖）
• 移动端需注意：部分安卓 WebView 对 :active 响应延迟或不触发，可加 touchstart 事件临时补救

transform: scale() 缩小动画为何卡顿或跳变？

直接写 transform: scale(0.95) 在 :active 里，常出现“闪一下就缩”或“松开后回弹生硬”，根本原因是缺少过渡控制。CSS 动画依赖 transition 显式声明，而 :active 本身不带缓动逻辑。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须给按钮设置 transition: transform 0.1s ease（推荐 ease 或 ease-out，避免 linear 显得机械）
• 不要只对 :active 加 transition，它只作用于“进入 active 状态”，松开时无过渡；要写在常态规则里
• 慎用 scale(0.8) 之类过小值——文字会糊，按钮可能被压出父容器边界，建议控制在 0.92–0.97 区间

需要兼容老浏览器？别只靠 :active

IE10 及更早版本不支持 :active 在非 <a></a> 元素上生效（比如 <button></button> 或 <div role="button">）。纯 CSS 方案在此类环境会彻底失效。 <ul> <li>如果必须支持 IE9/10，改用 JS 监听 <code>mousedown / mouseup，动态增删 class（如 is-pressed）

用 will-change: transform 提前提示浏览器优化渲染，但仅在动画频繁时加，避免过度触发合成层

注意 Safari 旧版对 transform 的 backface-visibility 处理异常，可加 backface-visibility: hidden 防闪烁

按钮带文字或图标时，缩小导致布局抖动怎么办？

单纯 scale() 会缩放整个盒模型，包括文字和子元素。若按钮内有图标+文字组合，或设置了固定 height/line-height，缩小后可能出现文字错位、图标偏移、甚至换行。

立即学习“前端免费学习笔记（深入）”；

• 优先对按钮自身设 transform-origin: center（默认就是，但显式写更稳）
• 避免在按钮内部元素上再设 transform，否则叠加缩放易失控
• 如果按钮高度靠内容撑开，缩小后 line-height 不变会导致文字“上浮”，可改用 padding 控制尺寸，让 scale() 只影响视觉，不影响流式布局
• 极端情况可考虑用 transform: scale(0.95) translateZ(0) 强制 GPU 加速，减少重排

实际最常被忽略的是：动画时长太短（200ms）又像卡住。0.12s 是多数场景下的甜点值。另外，别忘了测试手指按压面积——真机上拇指按下去，触点区域比鼠标大得多，动画响应要足够及时，否则用户会觉得“按钮不跟手”。