无需引入Bootstrap，如何获取同款按钮样式及历史样式列表？

嘿，刚好对Bootstrap按钮的演进和复刻这块挺熟悉的，分两部分给你搞定：

下面的CSS完全复刻了Bootstrap 5核心按钮的样式，包含基础样式、交互状态（hover/active/disabled）以及常用的按钮变体，直接复制到你的项目里就能用：

/* 基础按钮重置与通用样式 */
.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* 交互状态：hover */
.btn:hover {
  color: #212529;
  text-decoration: none;
}

/* 交互状态：active */
.btn:active {
  color: #212529;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

/* 交互状态：disabled */
.btn:disabled, .btn.disabled {
  pointer-events: none;
  opacity: 0.65;
}

/* 主按钮（Primary） */
.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

.btn-primary:active {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}

/* 次要按钮（Secondary） */
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
}

.btn-secondary:active {
  color: #fff;
  background-color: #565e64;
  border-color: #51585e;
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
}

/* 成功按钮（Success） */
.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn-success:hover {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
}

.btn-success:active {
  color: #fff;
  background-color: #146c43;
  border-color: #13653f;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}

/* 危险按钮（Danger） */
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
}

.btn-danger:active {
  color: #fff;
  background-color: #b02a37;
  border-color: #a52834;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}

/* 轮廓按钮示例（Outline Primary） */
.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-outline-primary:active {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}

从早期的立体风到现在的扁平化，Bootstrap按钮的设计完全贴合了前端设计趋势的变化：

• Bootstrap 1.x（2011年）：最早的版本，按钮是渐变立体风格，带有明显的外阴影和顶部高光，视觉上有强烈的凸起感，颜色饱和度很高，比如蓝色按钮是从浅蓝到深蓝的线性渐变，边角是小弧度圆角。
• Bootstrap 2.x（2012年）：延续了立体渐变设计，微调了阴影和颜色的深浅，增加了mini/small/large三种尺寸选项，hover状态会加深渐变颜色，整体风格更精致但还是偏厚重。
• Bootstrap 3.x（2013年）：开启扁平化转型，彻底移除了渐变效果，改用纯色填充，但保留了轻微的内阴影和细边框，hover状态是颜色变暗，active状态有内凹的视觉效果，边角统一为4px圆角，风格开始趋向简洁。
• Bootstrap 4.x（2018年）：进一步扁平化，移除了内阴影，简化了边框宽度，hover状态改为轻微的颜色加深+外阴影，支持通过rounded系列类自定义圆角，新增了outline（仅边框无填充）按钮变体，颜色系统更统一规范。
• Bootstrap 5.x（2021年至今）：完全扁平化，纯色填充无任何渐变，hover状态仅颜色加深+弱外阴影，active状态仅调整颜色，默认圆角更圆润（4px），新增了更多颜色变体，同时优化了响应式和无障碍支持。

内容的提问来源于stack exchange，提问作者DelphianBoy