Bootstrap如何修改按钮的默认悬停（Hover）阴影颜色

作者：袖梨 2026-08-12

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 就没了
确保你在 import Bootstrap 前就定义好变量，顺序不能错
其他颜色如 $secondary、$success 同理，各自控制对应按钮的 hover 阴影

为什么加了 CSS 还没变？常见失效原因

最常踩的坑不是写法错，而是加载顺序或作用域问题：

CSS 文件在 Bootstrap CSS 之后加载，但被缓存了 → 强刷（Ctrl+Shift+R）或清浏览器缓存
用了 Bootstrap CDN，但自定义 CSS 放在 <head> 里，而 Bootstrap CSS 在后面 → 把自定义样式放 Bootstrap <link> 之后
按钮加了 .btn-outline-primary —— 它的 hover 阴影逻辑和 .btn-primary 不同，默认是边框变色 + 无阴影，需单独覆盖 .btn-outline-primary:hover
用了 button[disabled] 或 .disabled → hover 样式不触发，阴影自然不会变