按钮悬停抖动本质是盒模型变化引发重排，应预设尺寸、避免改width/height/border/padding，改用transform实现视觉反馈，并确保常态与hover状态总尺寸一致。
按钮悬停时抖动，根本不是动画没写好，而是布局被意外重排了。只要改尺寸、加边框、调 padding，就可能让周围元素跳位。
为什么:hover会引发抖动
常见错误是直接在 :hover 里改 width、height、border 或 padding。这些属性会改变元素的盒模型尺寸，浏览器必须重新计算文档流，导致相邻元素位置偏移——尤其在 display: inline-flex 或 flex 容器中更明显。
- 比如按钮默认无边框，
:hover加border: 2px solid #000，宽高各+4px，Flex 项自动重分配空间 - 又如给
input[type="button"]在 hover 时设padding: 8px（原为4px），内容区撑开，文字位置微移，视觉上像“抖” - 即使只改
font-weight: bold，也可能因字体渲染宽度变化，触发重排（尤其在窄容器中）
用 transform 替代尺寸变更
transform 不影响文档流，缩放、位移、旋转都是渲染层操作，不会导致重排。这是最安全的视觉强化方式。
- 用
transform: scale(1.05)代替width: 120px+height: 40px - 配合
transform-origin: center控制缩放中心，避免边缘偏移 - 若需轻微上浮效果，用
transform: translateY(-2px)，比改margin-top更稳定 - 务必加
transition: transform 0.2s ease，否则缩放会生硬
边框抖动的预设方案
如果非要用边框做 hover 反馈，必须让常态和 hover 状态下元素的总尺寸一致。
立即学习“前端免费学习笔记（深入）”；
- 初始样式写
border: 2px solid transparent，而非border: none - hover 时只改
border-color，例如border-color: #007bff - 若需不同粗细（如从 1px 到 3px），则初始设
border: 3px solid transparent，hover 改色即可 - 同理，padding 也应预先留足：若 hover 要变成
padding: 10px，常态就写padding: 10px，靠背景或颜色变化传递反馈
Flex 容器中的额外注意点
Flex 子项抖动往往还叠加了 align-items 或 justify-content 的隐式影响。
- 避免在 hover 中改
margin（尤其是margin-left/margin-right），它会干扰justify-content: space-between的计算 - Flex 项默认
align-items: stretch，若 hover 改了height，其他项会被拉伸或压缩 - 更稳妥的做法是统一设
align-items: center，并确保所有按钮有相同min-height和box-sizing: border-box
真正难处理的不是怎么让按钮动起来，而是怎么让它动得不牵连别人——所有看似“抖”的问题，本质都是盒模型在悄悄变大变小。预设尺寸、绕开重排、用 transform 做视觉代理，这三步漏掉任何一环，都可能让抖动重现。
