Bootstrap按钮应用缩放动画后文字模糊，求可行解决方法

我完全懂这种头疼的情况——给Bootstrap按钮加个hover缩放动画，结果文字变得模糊发虚，试了一堆办法还是没搞定对吧？这种问题通常是浏览器在处理transform: scale()时的亚像素渲染或者硬件加速导致的，尤其是和Bootstrap的默认样式叠加后更容易出现。

下面给你几个针对性的解决方案，亲测有效：

方案1：优化按钮渲染属性与尺寸 #

首先尽量让按钮的尺寸是整数（避免百分比带来的小数像素），同时补充一些增强文字渲染的属性：

button.btn-outline-dark{
  margin-top: 6%;
  width: 300px; /* 把百分比换成固定像素值，避免小数尺寸 */
  height: 60px; /* 同理，固定高度更稳定 */
  color: black;
  transform-origin: center center; /* 明确缩放原点为中心 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button.btn-outline-dark:hover{
  transition: all .2s ease-in-out;
  transform: scale(1.1);
  backface-visibility: hidden;
  perspective: 1000px; /* 建立3D渲染上下文，减少模糊 */
  outline: 1px solid transparent; /* 触发浏览器重绘的小技巧 */
}

方案2：用伪元素实现缩放（彻底避免文字被拉伸） #

直接缩放按钮会连带着文字一起被放大，改用伪元素做边框的缩放，文字保持原尺寸，从根源解决模糊问题：

button.btn-outline-dark{
  margin-top: 6%;
  width: 30%;
  height: 17%;
  color: black;
  position: relative;
  z-index: 1;
  background: transparent; /* 确保按钮本身透明 */
  border: none; /* 去掉原Bootstrap边框，改用伪元素实现 */
}

button.btn-outline-dark::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid black; /* 模拟Bootstrap的outline-dark样式 */
  border-radius: .25rem; /* 匹配Bootstrap按钮的圆角 */
  z-index: -1;
  transition: transform .2s ease-in-out;
  transform-origin: center;
}

button.btn-outline-dark:hover::before{
  transform: scale(1.1);
}

这个方法视觉效果和原动画一致，但文字完全不参与缩放，再也不会模糊。

方案3：提前告知浏览器渲染需求 #

添加will-change属性让浏览器提前准备渲染资源，减少缩放时的卡顿和模糊：

button.btn-outline-dark{
  /* 其他原有样式 */
  will-change: transform;
}

注意不要滥用这个属性，只在需要的元素上添加，避免不必要的性能消耗。

如果你的项目中模糊情况更严重，优先试试方案2，它是最彻底的解决办法。方案1适合不想改动太多原有样式的场景，调整为固定像素尺寸会比百分比更稳定。

内容的提问来源于stack exchange，提问作者SilverSurfer