Bootstrap如何让按钮在Hover时产生平滑的颜色渐变交互-Bootstrap教程-PHP中文网

浏览器不支持 background（含 linear-gradient）的 css 插值过渡，导致 transition: background 无效；应改用 background-image 单独设置或伪元素 + opacity 方案实现可靠渐变悬停效果。

bootstrap如何让按钮在hover时产生平滑的颜色渐变交互

为什么直接写 `transition: background 0.3s` 没用

浏览器根本不支持 background（含 linear-gradient()）的 CSS 插值过渡，这不是 Bug，是规范限制。你写的 background: linear-gradient(45deg, #007bff, #00d2ff) 和 background: linear-gradient(45deg, #6f42c1, #0d6efd) 之间无法平滑插值——Chrome、Firefox 都会静默忽略 transition，结果就是硬切，毫无渐变感。

更常见的是：Bootstrap 自带的 .btn-primary:hover 用 background-color: #0056b3 !important 覆盖了你的渐变声明，导致 background-image 根本不渲染。

检查开发者工具的 Computed 面板，确认 background-image 是否为 none
确保自定义类中显式写了 background-color: transparent !important
别用 background 简写，它会清空 background-image，改用 background-image 单独设置

`background-image` + `opacity` 伪元素叠加才是真可靠方案

不依赖渐变插值，而是用半透明层叠加在原按钮上，靠 opacity 过渡模拟“亮化/加深”效果。这个方案完全兼容 Bootstrap 的 :focus、:active、:disabled，也不破坏语义和可访问性。

关键点：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

::before 必须有 content: ''，否则不渲染
父容器需加 position: relative 和 overflow: hidden，防止伪元素溢出边框
过渡只写 transition: opacity 0.3s ease，浏览器原生支持，无亚像素模糊
浅色背景用 rgba(255,255,255,0.2)，深色背景换 rgba(0,0,0,0.1)

.btn-gradient-hover {
  position: relative;
  overflow: hidden;
}
.btn-gradient-hover::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-gradient-hover:hover::before {
  opacity: 1;
}