按钮 hover 位移必须用 transform: translateY()，不可用 margin 或 top；需在常态规则中声明 transition: transform 0.2s ease，配合整数位移、backface-visibility: hidden 修复模糊，并同步调整 box-shadow，移动端须用 touch 事件 fallback。
按钮 hover 位移必须用 transform，别碰 margin 或 top
直接改 margin-top 或 top 会触发浏览器重排（reflow），动画卡顿、掉帧明显，尤其在低端安卓机或 safari 上。真正轻量且兼容的做法是用 transform: translatey() —— 它走合成层，gpu 加速，平滑可靠。
常见错误现象：
- 按钮 hover 后“跳一下”再动，不是匀速上移
- 移动端点一下就上移，松手不回落，状态错乱
- 文字边缘发虚，尤其 Chrome/Safari 下
-
transform: translateY(-2px)是上移 2px；正数（如3px）才是下移 - 必须配
transition: transform 0.2s ease，写在初始态，不能只写在:hover里 - 加
backface-visibility: hidden或perspective: 1000可修复文字模糊（多数情况有效） - 避免小数位移，比如
translateY(-1.5px)，改用整数-2px或-3px
btn 类上直接写 :hover 规则就行，但要注意选择器优先级
Bootstrap 的 .btn 默认没 hover 位移，你得自己加。别用 !important 硬顶，也别改 Bootstrap 源码——直接在项目 CSS 里写更具体的选择器即可。
使用场景：
- 普通按钮：.btn:hover { transform: translateY(-2px); }
- 带图标按钮：如果图标用了 <i></i> 或 <svg></svg>，确保它们没设 vertical-align: middle 之类干扰 baseline 的样式，否则位移后图文错位
- 想只对某类按钮生效？用更具体的选择器，比如
.btn-primary.custom-lift:hover - 如果按钮内含
.btn-text或.btn-icon子元素，检查它们的z-index，防止悬停时被遮挡 - Bootstrap 5 的
.btn默认有box-shadow，位移后阴影不动会显得“飘”，建议同步改：box-shadow: 0 4px 8px rgba(0,0,0,.1)
移动端没有 hover，别指望它自动生效
触摸设备（iOS Safari、Android Chrome）不支持真正的 :hover 语义——点一下触发，再点一下才离开，体验断裂。这不是 bug，是规范行为。
容易踩的坑：
- 只在桌面调试，真机测试发现效果完全不出现
- 用 DevTools 的“Toggle device toolbar”模拟，但没连真机验证
- 把 :hover 当成通用交互，结果用户点不动、反馈缺失
- 真要兼容触控，得用 JS 监听
touchstart/touchend，动态加is-hoveredclass - 或者干脆放弃位移，改用更明确的反馈，比如颜色加深 + 图标旋转（
transform: rotate(90deg)） - 测试务必上真机：iOS Safari 对
transform的渲染逻辑和桌面 Chrome 不同，尤其配合will-change时
为什么加了位移后按钮点击区域变小或错位
这是最常被忽略的细节：位移本身不影响点击热区，但如果你同时改了 padding、line-height 或用了 position: relative 配合伪元素（比如波纹、边框动画），就可能意外裁剪或偏移可点击区域。
性能/兼容性影响：
- transform 本身不影响事件区域，但 overflow: hidden（常见于波纹实现）会截断超出部分的点击响应
- 如果按钮父容器设了 overflow: hidden，位移后按钮边缘被裁，看起来“切了一角”
- 检查是否误给按钮加了
overflow: hidden—— 波纹动画需要它，但纯位移不需要 - 确认没在
:hover中改height或line-height，这两者会改变布局高度，导致点击热区上下偏移 - 用浏览器开发者工具的 “Layers” 面板看是否多出合成层，过多合成层反而拖慢动画
实际用的时候，最常漏掉的是过渡时间没设、移动端没 fallback、阴影没同步动——这三个点一缺，效果就显得廉价或者根本跑不通。
