悬停时纯色背景从底部填满，文字颜色同步反转
← 返回 按钮 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .fill{position:relative;display:block;width:200px;margin:50px auto;padding:13px 0;text-align:center;border:2px solid #4a9eff;border-radius:10px;color:#4a9eff;font-size:15px;background:transparent;cursor:pointer;overflow:hidden;transition:color .3s;z-index:0}
.fx .fill::before{content:"";position:absolute;inset:0;background:#4a9eff;transform:translateY(100%);transition:transform .3s ease;z-index:-1}
.fx .fill:hover{color:#fff}
.fx .fill:hover::before{transform:translateY(0)}<div class="fx">
<button class="fill">底部填充</button>
</div>