Bootstrap 的空心按钮应使用内置 .btn-outline-* 类实现，它通过 background-color: transparent、border 和 color 协同工作，具备完整交互态、无障碍支持及深色模式适配；手动覆盖 border 会破坏状态链、尺寸适配与主题响应。
Bootstrap 本身没有叫 .btn-outline 以外的“空心按钮”原生类——但 .btn-outline-* 系列（如 .btn-outline-primary）就是标准的空心样式实现，它不是靠移除背景色凑出来的，而是通过明确设置 background-color: transparent + border + color 三者协同完成的。
用 .btn-outline-* 类直接启用空心效果
这是最稳妥、语义最清晰的方式。Bootstrap 5.3 已内置全部 outline 变体：
-
.btn-outline-primary：蓝边+蓝字，背景透明 -
.btn-outline-success：绿边+绿字，hover 时自动填充浅绿背景 -
.btn-outline-secondary：中性灰边，适合非操作类按钮（如“取消”“更多”） - 所有 outline 按钮默认带
:focus蓝色聚焦环，无障碍友好
HTML 示例：
<button type="button" class="btn btn-outline-primary">确认</button>
别手动写 border: 1px solid ... 覆盖 .btn
有人想“省一个类”，直接在 .btn 上加自定义 border 和 transparent 背景，这会埋坑：
- 破坏 Bootstrap 的状态链：hover / active / disabled 样式不会自动适配，比如
.btn:disabled仍会显示半透明文字+无边框，视觉断裂 - 与
.btn-sm/.btn-lg冲突：outline 类内部已重设 padding 和 font-size，手写 border 不会随尺寸缩放 - 深色模式下失效：
.btn-outline-*在@media (prefers-color-scheme: dark)中有预置适配，手写样式需额外维护
.btn-outline-* 的真实优缺点
优点很实在：
- 开箱即用，无需额外 CSS，也不依赖 JS
- 所有交互态（hover/focus/active/disabled）都已定义，包括 focus-ring 的
box-shadow和 contrast ratio 合规性 - 和
.btn-group、.btn-toolbar完全兼容，圆角、间距、堆叠逻辑一致
缺点集中在设计约束上：
- 边框粗细固定为 1px，不能用
.border-2等工具类叠加（会覆盖 outline 类里的border-width） - 颜色只能从预设语义色里选（primary/success/warning 等），不能直接套
.text-danger或自定义 HEX 值 - 如果项目用了 CSS 变量定制主题色，
.btn-outline-*不会自动响应变量变更——得自己重写 CSS 规则
真正容易被忽略的是：outline 按钮在密集布局中（比如表格操作列或工具栏）可能因对比度不足导致可点击感弱，这时与其调 border-width，不如加 .shadow-sm 或微调 padding——空心的本质是“轻量”，不是“隐形”。
