直接覆盖 .btn 类需确保自定义 css 在 bootstrap 之后引入，使用相同或更高特异性选择器（如 .btn:hover），同步修改所有伪类状态、颜色三属性、圆角、阴影及响应式单位，推荐用 css 自定义属性统一管理。
直接覆盖 .btn 类的 CSS 规则有效，但必须注意优先级和继承链
Bootstrap 的按钮样式（如 .btn-primary）依赖多层嵌套规则和 !important（部分版本中存在），单纯在 <style></style> 标签里写 .btn { background: red; } 常常不生效。根本原因是 Bootstrap 的 CSS 文件加载顺序靠后，或其选择器更具体（比如 .btn.btn-primary:focus）。解决办法不是回避重写，而是让自定义规则“赢过”它：用相同或更高的特异性，避免依赖 !important。
- 把自定义 CSS 放在 Bootstrap CSS 之后引入（HTML 中
<link>顺序很重要） - 复制 Bootstrap 原始选择器结构来提升匹配精度，例如改悬停态就写
.btn:hover，而不是只写.btn - 如果 Bootstrap 版本用了
:where()（v5.3+），它的权重为 0，此时普通.btn:hover反而更容易覆盖
修改边框、圆角、阴影时，别漏掉伪类和禁用状态
按钮交互不止是默认态。用户点击、聚焦、悬停、禁用时的视觉反馈全由不同伪类控制，漏掉任意一个都会导致体验割裂。比如只改了 .btn { border-radius: 8px; }，但 .btn:focus 仍用原生 border-radius: 4px，焦点环就会突兀地卡在旧圆角里。
- 必须同步覆盖：
.btn:hover、.btn:focus、.btn:active、.btn:disabled、.btn:focus-visible - 阴影推荐用
box-shadow而非outline，后者无法圆角且难对齐；.btn:focus下建议保留可访问性所需的焦点指示，但可改成匹配设计的内/外阴影 - 圆角统一用
border-radius，不要混用border-top-left-radius等单边属性，除非刻意做不对称设计
颜色系统要连带更新 background-color、border-color 和 color 三者
Bootstrap 按钮的颜色不是单个属性决定的。比如 .btn-primary 默认下，正常态、悬停态、激活态分别对应不同的 background-color、border-color 和文字色。只改背景色，边框可能还是蓝灰，文字可能发白看不清。
- 查清你要覆盖的是哪个变体（
.btn-primary？.btn-outline-secondary？），然后按需重写整套状态链 - 推荐用 CSS 自定义属性（
--bs-btn-bg等）配合:root覆盖（Bootstrap 5.2+ 支持），比硬写值更可持续 - 深色模式下，如果用了
@media (prefers-color-scheme: dark)，记得检查.btn在暗色背景下的对比度是否达标，尤其文字色和禁用态
响应式按钮尺寸缩放容易被忽略：font-size 和 padding 必须协同调整
Bootstrap 的 .btn-lg / .btn-sm 是通过修改 font-size、padding 和 border-radius 共同实现的。如果你只重写了默认 .btn 的 padding，那 .btn-lg 会因继承原始 font-size 导致比例失调——字小 padding 大，按钮看起来空洞。
- 要么一并重写
.btn-lg、.btn-sm的全部相关属性，要么用em或rem单位让它们随根字体缩放 - 移动端小屏下慎用固定像素
padding: 12px 24px，建议用padding: 0.5rem 1rem并配合min-width防止过窄 -
line-height别手动设死，让它跟随font-size自然计算，否则多行按钮文案会错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
