Bootstrap 4按钮应用渐变后点击出现背景闪烁问题咨询

我之前也碰到过一模一样的情况！这种闪烁大概率是Bootstrap的.btn类自带的过渡动画在搞鬼，和你自定义的渐变背景冲突了。

问题根源 #

Bootstrap 4的.btn类默认包含这条样式：

.btn {
  transition: all .2s ease-in-out;
}

这里的all会让所有属性都应用过渡效果，包括背景。当你给按钮添加渐变背景后，hover/active状态切换时，浏览器会尝试在两个渐变之间做过渡，但渐变的过渡渲染并不平滑，就会出现你看到的闪烁现象。

解决方案 #

只需要覆盖这个过渡规则，把背景属性排除在外就行，分享两种实用的处理方式：

1. 精准控制过渡属性（推荐）
   自定义渐变按钮类，只保留需要过渡的属性（比如文字颜色、边框、阴影），排除背景的过渡：

/* 自定义渐变按钮基础样式 */
.btn-gradient {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
  color: #fff;
  /* 只保留必要的过渡属性，去掉background */
  transition: color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

/* hover状态直接替换渐变，避免过渡冲突 */
.btn-gradient:hover {
  background: linear-gradient(45deg, #ff8e8e, #66d9e8);
  color: #fff;
}

2. 直接禁用背景过渡（简单粗暴）
   如果不需要按钮其他的交互过渡效果，也可以直接重置过渡属性：

.btn {
  transition-property: none !important;
}

另外也可以检查下是否是按钮:focus状态下的outline或box-shadow导致的闪烁，如果是，也可以通过自定义样式调整这些属性的过渡逻辑，或者直接移除不必要的聚焦样式。

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