用::before或::after伪元素配合transform实现按钮边框滑入动画最稳妥，核心是伪元素初始缩为线状，hover时通过scalex()/scaley()拉伸并配合transition，避免直接过渡border-width导致的跳跃效果。
怎么用 CSS 实现按钮边框滑入动画
直接用 ::before 或 ::after 伪元素 + transform 做边框动画最稳妥，不依赖额外 HTML 结构，兼容性好（Chrome/Firefox/Safari/Edge 均支持）。
核心思路是：让伪元素覆盖在按钮上，初始缩成一条线（比如宽度为 0 或高度为 0），悬停时通过 transform: scaleX() 或 scaleY() 拉伸出来，配合 transition 实现平滑过渡。
常见错误是直接对 border 属性做 transition —— 它无法实现“从无到有”的滑入效果，因为 border-width 从 0 变到 2px 是跳跃的，没有中间状态。
- 推荐用
position: absolute定位伪元素，避免影响布局 - 必须设置
content: ""，否则伪元素不渲染 -
transition要写在正常态（非 hover）上，不是 hover 里，否则首次悬停会无动画 - 动画方向取决于伪元素初始尺寸和 transform 类型：横向滑入用
scaleX()，纵向用scaleY()
横向双侧边框滑入示例（左右边框同时滑出）
这是最常用的效果：鼠标移入时，左右两条细线从按钮中心向两侧展开。
.btn-border-slide {
position: relative;
padding: 12px 24px;
background: transparent;
border: none;
color: #333;
font-weight: 500;
}
.btn-border-slide::before,
.btn-border-slide::after {
content: "";
position: absolute;
top: 0;
width: 0;
height: 2px;
background: currentColor;
transition: width 0.3s ease;
}
.btn-border-slide::before {
left: 50%;
transform: translateX(-50%);
}
.btn-border-slide::after {
right: 50%;
transform: translateX(50%);
}
.btn-border-slide:hover::before,
.btn-border-slide:hover::after {
width: calc(50% - 12px); /* 减去 padding 避免盖住文字 */
}
注意：calc(50% - 12px) 中的 12px 是 padding-left/right 值，必须匹配，否则动画末端会留白或溢出。
四边滑入动画（更复杂但更酷）
想让上下左右四条边同时从中心滑出？得用四个伪元素（::before、::after 不够，需额外包裹或用两个伪元素各负责两条边），但更简洁的做法是用单个 ::before 配合 clip-path 或双重 transform。
不过 clip-path 在旧版 Safari 支持弱，所以更可靠的是分方向控制：
- 顶部边框：
height: 0→height: 2px+transform: translateY(-100%) - 底部边框：
height: 0→height: 2px+transform: translateY(100%) - 左侧边框：
width: 0→width: 2px+transform: translateX(-100%) - 右侧边框：
width: 0→width: 2px+transform: translateX(100%)
每个方向单独设 transition，延迟可微调（如 transition-delay: 0.05s）做出波纹感。但要注意：过多 transition 和 transform 层叠容易触发重排，小按钮上没问题，大范围交互区域建议测下帧率。
为什么不用 JavaScript 控制这个动画
纯 CSS 动画由浏览器合成层处理，性能远高于 JS 操作 style 或 classList。除非你要做路径不规则（比如弧形滑入）、或响应用户手势（长按才触发），否则没必要 JS。
容易踩的坑：
- 给按钮加
outline: none，否则键盘聚焦时默认虚线框会和动画冲突 - 移动端点击后残留 :hover 状态（iOS Safari 常见），加
ontouchstart=""或用@media (hover: hover)媒体查询隔离 - 如果按钮用了
box-sizing: border-box，伪元素定位要重新算 offset，别直接套示例代码
真正难的不是写出第一版动画，而是让它在不同字号、不同 padding、不同屏幕缩放下都对齐——每次改文案长度或适配暗色模式时，都要重新校准伪元素的 width/height 和 transform 偏移量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
