Bootstrap按钮点击无缩放效果，需手动定义:active的transform:scale()并确保transition写在常态规则中，推荐.btn.btn-primary.click-scale:active{transform:scale(0.96);}且声明transform-origin:center。
Bootstrap按钮点击时没缩放效果？检查是否覆盖了默认:active样式
Bootstrap 5 默认的 .btn 按钮在点击（:active）时会触发轻微的缩放和阴影变化，但这个效果极易被自定义 CSS 覆盖。常见原因是全局重置（如 * { transition: none !important; }）或局部写了 transform: none; 却没为 :active 单独恢复。
- 确认未在按钮或其父元素上设置
transition: none或transform: none - Bootstrap 的原始缩放是通过
transform: translateY(1px)实现的（非 scale），不是放大缩小 - 若你期望的是
scale(0.98)这类视觉反馈，必须显式重写:active规则，不能依赖默认行为
如何用:active实现点击缩放？直接加transform: scale()
想让按钮点击时“按下去”有缩放感，最简单可靠的方式就是手动定义 :active 的 transform: scale()。注意：必须同时声明 transition，否则缩放会突兀跳变。
.btn-click-scale:active {
transform: scale(0.96);
transition: transform 0.15s ease;
}
-
scale(0.96)是较自然的点击压感值，低于 0.9 可能显得太“塌” -
transition必须写在常态（非:active）规则里才生效，否则点击瞬间无过渡 - 如果按钮已有
transition（比如 Bootstrap 自带的background-color 0.15s），可复用它，无需重复声明
为什么加了:active却没反应？优先级和伪类顺序问题
即使写了 :active，也可能因 CSS 优先级不足或伪类顺序错误而失效。Bootstrap 的按钮样式通常带 .btn-primary:active 这类高权重要求，你的自定义规则必须至少同级或更高。
- 避免只写
.btn:active—— 它会被.btn.btn-primary:active覆盖 - 推荐写法：
.btn.btn-primary.click-scale:active，然后给按钮加class="btn btn-primary click-scale" - 不要把
:active放在:hover后面定义（如:hover, :active），CSS 会把它当选择器组，而非独立状态 - 移动端需额外加
touch-action: manipulation;防止延迟触发
缩放后文字模糊或图标错位？别忘处理transform-origin和字体渲染
缩放可能引发 subpixel 渲染问题，尤其在 Chrome 下小字号文字会发虚；若按钮含 SVG 图标，scale() 还可能让其边缘偏移。
- 加
transform-origin: center;确保缩放中心一致（默认就是 center，但显式声明更稳妥） - 对文字加
backface-visibility: hidden;或-webkit-font-smoothing: antialiased;减轻模糊 - 若图标错位，检查是否设置了
vertical-align: middle或使用display: flex布局替代行内对齐 - 慎用
scale(0.9)+margin-top: 1px组合模拟“按下”，容易破坏垂直居中逻辑
实际项目里最容易被忽略的，是把 transition 写在 :active 里而不是常态规则中——那缩放永远是瞬时的，用户根本感知不到“反馈”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
