幽灵按钮背景填充过渡不能直接用 background-color 动画，因其初始 transparent 与目标色无法线性插值；需用 linear-gradient 配合 background-size 百分比缩放（0%→100%），并固定 background-position 和设置 background-origin: border-box 确保动画精准。
幽灵按钮背景填充过渡为什么不能直接用 background-color 动画
因为幽灵按钮（transparent border + solid text）本身没有背景色，靠 background-image 或渐变模拟“填充感”。直接对 background-color 做 transition 会失效——初始值是 transparent，目标值比如 #007bff，但浏览器无法在透明和颜色之间做线性插值动画，实际表现为突变或无反应。
真正可行的路径是：用线性渐变作背景，再通过控制 background-size 的百分比缩放，让渐变“从无到有”地展开。
background-size 百分比过渡的关键写法
核心在于把渐变定义为横向铺满（to right），初始 background-size: 0% 100%（宽度 0%，高度 100%），hover 时变为 100% 100%。这样渐变就像一张可拉伸的贴纸，从左往右“铺开”。
必须同时设置：background-position 固定起始点（如 left center），否则尺寸变化时渐变会滑动；还要用 background-origin: border-box 确保计算基准一致。
-
background-image: linear-gradient(to right, #007bff, #007bff)—— 单色渐变，避免色差干扰 -
background-size: 0% 100%—— 初始不可见 -
background-position: left center—— 锚定左侧起点 background-repeat: no-repeattransition: background-size 0.3s ease
常见翻车点：border 和 padding 对 background-size 的影响
background-size 百分比默认相对于 background-origin 区域计算。如果没显式设 background-origin，且按钮有 border，不同浏览器可能以 padding-box 或 border-box 为基准，导致动画错位或不触发。
真实场景中，幽灵按钮常带 border: 2px solid #007bff，此时务必加：background-origin: border-box，否则 0% 100% 可能被解释成“0% 宽度 = 0px”，而不是“0% of total width including border”。
另外，padding 会影响内容区域大小，但只要 background-origin 和 background-position 配合得当，不影响动画逻辑。
完整可粘贴代码片段（含 hover 恢复逻辑）.ghost-btn {
display: inline-block;
padding: 10px 24px;
border: 2px solid #007bff;
color: #007bff;
font-weight: 600;
text-decoration: none;
position: relative;
overflow: hidden;
<p>/<em> 渐变背景 </em>/
background-image: linear-gradient(to right, #007bff, #007bff);
background-size: 0% 100%;
background-position: left center;
background-repeat: no-repeat;
background-origin: border-box;</p><p>transition: background-size 0.3s ease, color 0.3s ease;
}</p><p>.ghost-btn:hover {
color: white;
background-size: 100% 100%;
}</p><p>/<em> 确保文字不被裁切 </em>/
.ghost-btn::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
}</p>
注意：::before 不是必须的，但加上能防止某些旧版 Safari 在快速悬停时出现渲染残留。真正关键的是 background-origin 和 background-position 的组合——漏掉任意一个，动画就容易卡在 50% 或偏移出界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
