纯css实现按钮背景上下平移需用伪元素而非transform：设按钮overflow:hidden和position:relative，伪元素初始top:-100%并过渡至top:0，从而实现干净可控的滑入效果。
按钮悬停时背景上下平移的 CSS 实现原理
纯 CSS 实现按钮背景上下平移，关键不是用 transform: translateY() 直接动整个按钮，而是用伪元素（::before 或 ::after）覆盖在按钮上，再对它做位移动画。否则按钮内容会跟着抖动，文字错位、点击区域偏移，体验很差。
核心思路：给按钮设 overflow: hidden，伪元素铺满按钮尺寸，初始位置偏移（比如 top: -100%），悬停时用 transition 把它拉回（top: 0）——视觉上就是背景“从上往下”滑入。
用 ::before 做平移背景的完整写法
下面是最简可用的代码结构，兼容现代浏览器（Chrome/Firefox/Safari/Edge ≥ 16），无需 JS：
.btn-slide {
position: relative;
overflow: hidden;
background: #3498db;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
}
.btn-slide::before {
content: '';
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
background: #2980b9;
transition: top 0.3s ease;
}
.btn-slide:hover::before {
top: 0;
}
-
position: relative是必须的，否则::before无法相对于按钮定位 -
overflow: hidden防止伪元素移出时露边，这是“平移感”的边界保障 -
transition写在默认状态（非 hover），避免鼠标反复进出时动画重置卡顿 - 若要“从下往上”效果，把
top: -100%改成top: 100%，hover 时设为top: 0
为什么不用 background-position？
有人试过用 background-position: 0 -20px → 0 0 模拟位移，但实际效果常不理想：
- 渐变背景（
linear-gradient）下，background-position位移会拉伸或重复纹理，不像伪元素那样干净可控 - 如果按钮宽高不固定（比如文字长度变化），
background-position的像素偏移量很难适配 - 部分 Safari 版本对
background-position+transition的渲染有延迟或闪烁 - 伪元素方案能单独控制颜色、透明度、甚至加阴影，扩展性更强
移动端触摸设备上的注意事项
iOS Safari 和部分安卓浏览器默认不触发 :hover，尤其在非 <a></a> 元素上。解决办法很直接：
- 给按钮加
touchstart事件监听器，临时加个 class（如is-hovered），再用 CSS 处理该 class 的样式 - 更轻量的做法：在
里加<meta name="viewport" content="width=device-width, initial-scale=1">，并确保按钮有cursor: pointer—— 这能激活 iOS 的 hover 模拟（仅限首次触摸后） - 真要兼顾所有场景，建议用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，避免触屏设备浪费过渡动画资源
平移距离和速度调得太快（0.1s）或太慢（0.6s）都容易显得突兀；0.25–0.35s 是多数 UI 库采用的平衡点。伪元素的 z-index 不用设，默认就在按钮文字之下，但如果按钮内有图标或复杂子元素，可能需要显式加 z-index: 1 确保层级正确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
