按钮悬停缩放没反应的主因是缺失transition声明，必须在基础样式中写transition: transform 0.2s ease;，而非仅在:hover中；缩放模糊需用will-change优化或调整scale值；移动端需用:active或JS替代:hover。
按钮悬停缩放没反应？缺 transition 是主因
直接写 button:hover { transform: scale(1.05); } 通常没动画效果，因为 transform 本身不带过渡行为。浏览器只在状态切换瞬间应用缩放，人眼感知不到变化。
必须显式声明过渡属性：
-
transition: transform 0.2s ease;—— 只过渡transform，避免all拖慢性能或触发边框/阴影意外动画 - 加在按钮基础样式上（如
.btn或自定义类），不能只写在:hover里 - 若用 Bootstrap 5 的
.btn，建议覆盖而非修改源码，例如：.btn-hover-scale { transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1); }<br>.btn-hover-scale:hover { transform: scale(1.08); }
缩放后按钮文字模糊、边缘发虚怎么办
这是 subpixel 渲染问题：scale() 把元素挪到非整像素位置，字体抗锯齿失准。尤其在 Chrome 和 Safari 上明显。
两个低成本解法：
- 加
will-change: transform;提前提示合成层，缓解模糊（不是万能，但有效） - 避免用
scale(1.05)这类小值——人眼难察觉，还放大了渲染误差；推荐scale(1.08)～scale(1.12)，既明显又减少相对偏移 - 别设
transform-origin: top left等偏移锚点，保持默认center，缩放更稳
移动端点击后卡在放大态？:hover 不可靠
触摸设备没有持续 hover 状态，:hover 在 iOS 和部分安卓浏览器中仅在点击瞬间触发，且不会自动恢复原状。
纯 CSS 方案无法可靠支持触控，必须补一层交互逻辑：
- 加
button:active { transform: scale(0.95); }模拟按下反馈（注意是缩小，不是放大） - 如需一致体验，用 JS 监听
touchstart和touchend切换 class，例如：btn.addEventListener('touchstart', () => btn.classList.add('touched'));<br>btn.addEventListener('touchend', () => btn.classList.remove('touched'));再配 CSS.touched { transform: scale(1.08); } - 别混用
:hover和:active同时缩放，否则触屏用户点一下就卡住
和 Bootstrap 默认按钮样式冲突怎么避
Bootstrap 的 .btn 已带 transition（主要是 background-color 和 border-color），直接覆盖可能让颜色变化和缩放不同步。
稳妥做法：
- 不改
.btn原类，另起一个修饰类如.btn-scale，并确保选择器优先级足够（比如写成.btn.btn-scale） - 禁用默认过渡干扰：
.btn.btn-scale { transition: transform 0.2s ease, background-color 0s, border-color 0s; } - 如果按钮含图标（如 Font Awesome），缩放会连图标一起变大，无需额外处理；但若图标用
background-image，得确认其background-size是否随容器缩放
