hover时文字位移不明显，需将transition写在常态规则中而非:hover里，显式声明padding-left/right并排查优先级覆盖或预处理器嵌套错误。
hover时文字位移不明显？检查transition是否作用在padding上
直接给padding加transition是可行的，但浏览器默认只对“可动画属性”做平滑过渡——而padding本身没问题，问题常出在：你改的是padding，但视觉位移感弱，是因为文字没“跟着动”，或者过渡被其他样式覆盖。
- 确保
transition写在按钮的常态规则里（不是:hover里），例如：transition: padding 0.2s ease; - 只动
padding-left和padding-right，比同时动上下更安全，避免触发重排（reflow）影响性能 - 别用
padding: 0.5rem 1rem这种简写去覆盖hover状态，容易漏掉某个方向；显式写全padding-left和padding-right更可控
为什么加了transition还是没动画？常见CSS优先级陷阱
最常踩的坑是：hover规则里用了!important，或引入了第三方UI库（比如Bootstrap）的按钮样式，把你的transition干掉了。浏览器开发者工具里看computed面板，搜transition，如果显示none，说明它根本没生效。
- 检查是否有更高优先级的选择器覆盖了你的
transition，比如.btn:hover里没写transition，但父类或全局重置写了transition: none - 某些CSS预处理器（如Sass）嵌套时，
&:hover块里写transition是无效的——必须写在根选择器下 - 旧版Safari（transition缩写支持不稳定，建议用完整写法：
transition-property: padding-left, padding-right;
位移反馈太“飘”？padding变化要配合text-align和white-space
单纯增大padding-left会让文字看起来“向右滑”，但如果按钮宽度固定、text-align: center，位移会被抵消——你调了padding，但文字居中逻辑又把它拉回中间，结果就是“动了又回来”。
- 用
text-align: left+ 固定width，再增减padding-left，位移感最直观 - 避免在
white-space: nowrap的按钮里大幅调整padding，可能引发文字溢出或裁剪 - 如果按钮含图标（如
::before），padding变化会连带挤图标位置，需同步微调margin或transform来对齐
替代方案：用transform比padding更轻量且兼容
如果只是想要“文字轻微右移”的反馈，transform: translateX(2px)比改padding更推荐——它不触发重排，GPU加速友好，iOS/Android WebView表现也更稳。
- 写法示例：
transition: transform 0.15s ease; &:hover { transform: translateX(2px); } - 注意：
transform会创建新层叠上下文，可能影响z-index或遮罩行为，尤其在弹窗、下拉菜单里要验证层级 - 不要和
padding混用做同方向位移，否则动画叠加导致节奏错乱
transition时间别设低于0.1s，不然容易卡顿。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
