最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Bootstrap如何修改按钮的默认悬停（Hover）阴影颜色
时间：2026-08-12 12:21:49 编辑：袖梨 来源：一聚教程网
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 样式不触发，阴影自然不会变
真正麻烦的不是改颜色，而是搞清当前按钮到底属于哪套 shadow 规则：是 solid、outline、ghost 还是 link 类型——每种的 hover 行为都不同，得先看 class 名再动手。