Bootstrap按钮点击变深是:active样式作用，通过box-shadow和背景色加深实现；可覆盖CSS修改，需同步设border-color和box-shadow，避免:hover与:active混用。
Bootstrap 按钮点击时颜色变深是 :active 样式在起作用
默认情况下，bootstrap（v5.x）所有按钮（btn-primary、btn-success 等）在鼠标按下（即触发 :active 伪类）时，会通过 box-shadow 和轻微的背景色加深来模拟“按下去”的视觉反馈。这不是 bug，是设计行为。
如果你发现点击后颜色“变深得不自然”或与设计稿不符，通常是因为：
- 自定义主题色未同步更新
$btn-active-bg等 Sass 变量 - 第三方 CSS 覆盖了 Bootstrap 的
:active规则（比如重置库或 UI 框架冲突） - 用了
!important强行改了:hover，但忘了同步处理:active
想改点击态颜色？直接覆盖 :active 选择器
最稳妥的方式是写一条比 Bootstrap 原生规则更具体的 CSS，优先级足够高即可生效。不要动 Sass 变量（除非你全量编译），日常项目用 CSS 覆盖更快。
示例：把 btn-primary 点击时的背景色从默认加深改为固定值：
.btn-primary:active {
background-color: #0056b3 !important;
border-color: #004085 !important;
box-shadow: none;
}
注意点：
-
!important是为了压过 Bootstrap 的原生:active规则（它带!important） - 务必同时设
border-color和box-shadow，否则边框/阴影可能残留旧样式 - 如果用的是 Bootstrap 4，
:active默认无box-shadow，但 v5 默认有，清掉更干净
:hover 和 :active 别混着改
很多人想“统一 hover 和点击效果”，结果写成这样：
.btn:hover, .btn:active { background-color: #0069d9; }
这会导致两个问题：
- 移动端点按后按钮会长时间保持
:active态（直到焦点离开），体验奇怪 - 键盘用户用 Tab 进入按钮时，
:focus态被忽略，可访问性下降 - 失去视觉层次：hover 是“准备点”，active 是“正在点”，语义不同
正确做法是分开控制：
.btn-primary:hover { background-color: #0069d9; }
.btn-primary:active { background-color: #0056b3; }
.btn-primary:focus { outline: 2px solid rgba(0,105,217,.5); }
用 Sass 编译时改变量更彻底（仅限构建流程可控场景）
如果你用 Webpack/Vite + Sass，且能修改 Bootstrap 源引入方式，推荐改变量而非覆盖 CSS：
- 重定义
$btn-hover-bg和$btn-active-bg，它们会影响所有按钮类型 - 单独改某类按钮，可用
map-merge调整$theme-colors后再导入 Bootstrap - 注意：v5.3+ 中
$btn-active-bg默认是shade-color($color, 10%)，所以改基础色后 active 会自动适配
简单示例（_custom.scss）：
$primary: #0066cc; $btn-hover-bg: shade-color($primary, 15%); $btn-active-bg: shade-color($primary, 25%); @import "bootstrap/scss/bootstrap";改
:active 态最容易被忽略的是移动端真机测试——模拟器里点按很快恢复，但手机上长按或快速连点可能让 :active 残留，务必在 iOS/Android 实机验证。
