按钮hover无动画主因是缺transition声明，必须在常态规则中设置transition: transform 0.2s ease-in-out；scale(1.03)为推荐值，兼顾感知与渲染稳定性；移动端需用:active或js模拟触控反馈。
按钮hover没动画？缺transition是主因
直接写 button:hover { transform: scale(1.04); } 肯定没动画——浏览器不知道“该用什么方式、花多久”过渡，只会在悬停瞬间硬切。必须在常态规则（非 hover）里声明 transition: transform 0.2s ease-in-out;，否则移出时直接跳回原状。
常见错误包括：
- 把 transition 只写在 :hover 里
- 用 transition: all 0.2s 导致 padding、border 等意外变化，引发抖动或重排
- Bootstrap 的 .btn 类本身已有 transition（针对 background-color），覆盖时没保留或合并它，导致颜色变和缩放不同步
缩放值设多少才靠谱？别贪大也别太小
scale(1.03) 是多数项目实际采用的平衡点：人眼可感知，又不破坏布局节奏。超过 scale(1.05) 容易撑破 .btn-group 或 .col 内部空间，相邻按钮被视觉挤压；更关键的是，Chrome/Firefox 在非整数缩放下触发亚像素渲染，文字边缘发虚——这不是 bug，但用户会觉得“糊”。
如果按钮已有其他 transform（比如 rotate(2deg)），不能单独写 scale(1.04)，否则会覆盖旋转效果；应合并为 transform: rotate(2deg) scale(1.04)。
移动端点按卡住？:hover 在触屏上根本不可靠
iOS Safari 和多数安卓浏览器不支持持续 hover 状态，:hover 仅在点击瞬间触发，松手后不自动恢复，导致按钮“卡在放大态”。纯 CSS 无法解决，必须补交互逻辑：
- 加
button:active { transform: scale(0.95); }模拟按下反馈（注意是缩小，不是放大） - 或用 JS 监听
touchstart/touchend切换 class：btn.addEventListener('touchstart', () => btn.classList.add('touched')) - 再配 CSS：
.touched { transform: scale(1.04); } - 别混用
:hover和:active同时缩放，否则触屏用户点一下就卡住
样式冲突、模糊、边框变粗？这些都不是“写错了”
transform: scale() 是等比缩放整个渲染层，包括字体、阴影、1px 边框——所以“模糊”是亚像素渲染机制导致，“边框变粗”是因为 1px 被拉伸成 1.04px，浏览器只能插值模糊处理。
缓解办法：
- 加 will-change: transform; 提前提示合成层
- 加 backface-visibility: hidden; 强制硬件加速改善文本渲染
- Bootstrap 按钮类权重高，自定义样式要复刻完整类名，比如 .btn.btn-primary.custom-scale:hover，否则不生效
- 避免搭配 margin-top 或 top 做位移，和 scale() 叠加可能触发重排；改用 transform: translateY(-1px) scale(1.03)
缩放动画看着简单，真正落地时最常栽在 transition 位置、移动端 fallback 和亚像素渲染这三处——它们不报错，但会让效果断层、模糊或卡死。
