Bootstrap按钮默认悬停阴影颜色怎么修改

在 Bootstrap 5 中，按钮在 hover 状态下的阴影颜色并不是固定写死的，而是通过 Sass 变量动态生成。例如 .btn-primary:hover 常见使用的就是 rgba(var(--bs-primary-rgb), 0.25)。如果需要自定义，一种方式是直接用 CSS 覆盖，但要注意必须完整重写 box-shadow 的值，并适当提高选择器权重；另一种更彻底的方式，则是从源头调整 $primary 这类主题变量。

Bootstrap 5 按钮 hover 阴影颜色的定义位置

在 Bootstrap 5 里，.btn 元素在 :hover 状态下默认会带有一层 box-shadow。不过，这个阴影并不是所有按钮都会明显生效，实际更常见于 .btn-primary、.btn-secondary 等带语义色的按钮。它的颜色也不是固定的十六进制值，而是基于对应主题色生成的 rgba(..., 0.25)。也就是说，这个效果是通过 Sass 变量动态计算出来的，并非静态写在样式表中的固定值。

因此，不能仅靠修改单个 CSS 类名就完全处理掉这一效果，通常需要重写规则或直接调整变量。

使用 CSS 覆盖 hover 的 box-shadow

如果只是临时修改某一个按钮或少量按钮，直接使用 CSS 覆盖通常是最快的方法。需要注意的是，选择器权重要足够，并且必须带上 :hover 伪类：

.btn-primary:hover {
box-shadow: 0 0 0 0.2rem rgba(255, 105, 180, 0.3); /* 粉色阴影 */
}

• 必须完整写出 box-shadow 的值，包括偏移、模糊、扩散和颜色，不能只改单独的 color 或 filter
• Bootstrap 的默认值通常是 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25)，因此新值也需要包含这几个部分
• 如果需要依赖 !important，通常说明选择器权重不足；更稳妥的方式是增加父级类，或直接使用 .btn-primary:hover 这类组合选择器

使用 Sass 自定义主题色

如果项目使用的是 Bootstrap 源码，也就是通过 npm 配合 Sass 编译，那么直接修改 $primary 变量，就可以同步影响所有基于该颜色生成的 hover 阴影：

// _custom.scss
$primary: #ff69b4;
@import "bootstrap/scss/bootstrap";

这样，所有 .btn-primary:hover 的阴影都会自动变为 rgba(255, 105, 180, 0.25)。

• 不要直接修改 node_modules/bootstrap/scss/_variables.scss，否则下次执行 npm install 后修改内容可能会被覆盖
• 需要确保在导入 Bootstrap 之前就完成变量定义，顺序不能颠倒
• 其他颜色变量如 $secondary、$success 也同样适用，分别控制对应按钮的 hover 阴影

CSS 已添加但样式未生效的常见原因

很多情况下，问题不在于写法本身，而在于加载顺序或作用域设置：

• 自定义 CSS 文件虽然在 Bootstrap CSS 之后加载，但浏览器使用了缓存，此时可以强制刷新页面或清理浏览器缓存
• 使用 Bootstrap CDN 时，自定义 CSS 放在 中，但 Bootstrap CSS 链接反而写在后面，此时应将自定义样式放在 Bootstrap 的 之后
• 按钮使用的是 .btn-outline-primary，它的 hover 阴影逻辑与 .btn-primary 不同，默认通常表现为边框变色且没有阴影，因此需要单独覆盖 .btn-outline-primary:hover
• 元素处于 button[disabled] 或 .disabled 状态时，hover 样式不会触发，因此阴影也不会变化

实际调整时，关键不只是修改颜色，还要先确认当前按钮属于哪一类阴影规则，例如 solid、outline、ghost 或 link 类型，因为不同类型的 hover 表现并不相同，需要结合具体 class 名来处理。