Bootstrap默认按钮Hover无渐变，需手动添加transition和自定义hover色值；推荐复用其颜色变量，配合background-image实现真渐变，并统一处理focus/disabled/active状态以保障可访问性。
按钮Hover颜色渐变需要自己写CSS，Bootstrap默认不提供
Bootstrap 的 btn 类只定义了静态状态下的颜色和边框，:hover 伪类是直接跳变的（比如从 #007bff 到 #0056b3），没有过渡效果。要实现“平滑渐变”，必须手动添加 transition 和定义 hover 色值。
关键：给按钮加 transition + 自定义 hover 背景色
最简可行方案是复用 Bootstrap 的颜色变量，避免脱离设计系统。例如对 btn-primary 做渐变：
.btn-primary {
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.btn-primary:hover {
background-color: #0069d9; /* 比默认 hover 色更柔和，或用 linear-gradient */
border-color: #0062cc;
}-
transition必须写在常态样式里，不能只写在:hover中 - 不要只写
transition: all 0.3s—— 会触发重排，性能差且可能意外动画其他属性（如box-shadow） - 如果想用渐变色（非纯色），
background-image: linear-gradient(...)也能用，但需注意background-color会被覆盖，建议统一用background
用 gradient 实现真·渐变 Hover（非纯色切换）
纯色过渡只是“淡入淡出”，若要背景从左到右扫过式渐变，得用 background-image 并配合 background-size 动画：
.btn-gradient {
background: linear-gradient(90deg, #007bff, #0056b3);
background-size: 200% 200%;
transition: background-position 0.4s ease;
}
.btn-gradient:hover {
background-position: 100% 100%;
}- 必须设
background-size: 200% 200%，否则无法位移动画 -
background-position: 100% 100%让渐变起点移到右下角，视觉上像“扫过” - 这个技巧在 Safari 上偶尔有渲染延迟，可加
-webkit-background-clip: text等兼容写法，但按钮文本通常不需要
别忽略禁用态（disabled）和焦点态（focus）的连贯性
只改 :hover 容易导致交互断裂。用户鼠标移开、键盘聚焦、屏幕阅读器操作时体验会割裂：
-
:disabled下transition无效，但颜色突变仍难看，建议同步调整opacity或加filter: grayscale(0.5) -
:focus和:focus-visible也应保持相近的transition时长，否则键盘操作显得“卡顿” - 如果用了
linear-gradient，:disabled里得重写为纯色，因为渐变在禁用态下不可见
真正麻烦的不是怎么写动画，而是让 hover、focus、active、disabled 四个状态的动效节奏一致，且不干扰可访问性。很多项目只调 hover，结果 WCAG 对比度检查失败——因为 focus 态没过渡，高亮太刺眼。
