Bootstrap按钮的:active状态默认无过渡效果，其点击反馈由浏览器原生实现；若需可控动效，应优先使用:hover或JavaScript动态添加类来管理transition。
按钮点击态（:active）过渡时间无法通过 CSS 变量修改
bootstrap 按钮的 :active 状态默认不依赖 transition，而是靠浏览器原生点击反馈（如 background-color 瞬时切换），所以不存在“过渡时间”可调——你看到的“按下动画”其实是伪类样式直接生效，没有动画过程。
如果你观察到按钮有淡入/缩放等动效，那大概率是以下情况之一：
- 项目中额外引入了全局
:active过渡规则（例如*:active { transition: all 0.1s; }） - 按钮被包裹在自定义组件里，该组件加了
transform或opacity的过渡逻辑 - 使用了第三方插件（如
bootstrap-touchspin）劫持了点击行为
.btn:focus 和 .btn:active 的样式优先级容易冲突
Bootstrap 5 的 .btn 类本身对 :focus 和 :active 仅做颜色/边框微调，不设 transition。但一旦你手动加 transition，就可能和 focus-visible、键盘导航或移动端 click 延迟产生冲突：
-
.btn:active { transform: translateY(1px); transition: transform 0.1s; }在 iOS Safari 上可能不触发，因 touch 事件未冒泡到 :active - 若同时写了
.btn:focus { outline: 2px solid #0d6efd; transition: outline 0.2s; }，键盘 tab 切换时会出现 outline 慢半拍 - 用
!important强制覆盖会破坏 Bootstrap 的 dark mode 适配逻辑（.btn-dark .btn:active可能失效）
真正可控的交互反馈要靠 .btn:hover + 自定义 transition
想让按钮有“可感知的响应速度”，最稳的做法是控制 :hover 状态，并确保 transition 属性完整：
- 只改
background-color和border-color，避免触发布局重排：.btn:hover { background-color: #0a58ca; border-color: #0a58ca; transition: background-color 0.15s, border-color 0.15s; } - 如果加了
transform: scale(0.98)，必须同步声明transform的 transition：transition: background-color 0.15s, border-color 0.15s, transform 0.15s; - 禁用过渡？写
transition: none或transition: background-color 0s;，不要只写transition: 0s（语法错误，整条规则失效）
移动端真机测试比 DevTools 更关键
桌面端 hover 过渡在手机上根本不会触发，而 :active 在 Android Chrome 中常被系统吞掉（尤其 fastclick 启用时）。实际项目中更推荐：
- 用 JS 监听
touchstart/touchend动态加 class（如.btn-pressed），再针对该 class 写 transition - 避免依赖
:active做核心反馈，把视觉变化放在:hover（桌面）或.btn-pressed（移动端）上统一处理 - 所有 transition 值建议用
ms单位（如150ms），避免小数秒（.15s）在某些旧 WebView 解析异常
transition-duration 更值得花时间验证。
