按钮hover无动画主因是缺transition，必须写在常态规则中；scale(1.03)为平衡值，避免亚像素模糊；触屏需用:active或js模拟反馈；缩放引发模糊和边框变粗属渲染机制，可用will-change和backface-visibility优化。
按钮hover没动画？缺transition是主因
只写button:hover { transform: scale(1.04); }肯定没动画——浏览器不知道“该花多久、怎么变”，只会瞬间跳变。动画必须靠transition触发，而且它得写在**常态规则里**（比如.btn或.btn-primary），不能只塞进:hover里。
常见错误包括：
-
transition只写在:hover中，导致移出时直接跳回原状 - 用
transition: all 0.2s，结果padding、border也动，引发抖动或重排 - Bootstrap 的
.btn类本身已有transition（针对background-color），覆盖时没保留或合并，颜色变和缩放不同步
scale()值设多少才靠谱？别贪大也别太小
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实现位移——它们触发重排；坚持用transform
真正容易被忽略的是缩放对布局的影响：按钮放大后可能压到相邻元素，这不是动画问题，而是文档流没预留空间——得靠overflow: hidden、transform-origin或父容器padding补偿，不真机测很难发现。
