悬停时原文字上移消失，新文字从底部滑入
← 返回 按钮 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .ts{display:block;position:relative;width:200px;height:48px;margin:46px auto;overflow:hidden;border-radius:10px;background:#4a9eff;border:none;cursor:pointer;font-size:15px}
.fx .ts span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .35s cubic-bezier(.4,.1,.2,1)}
.fx .ts .s2{background:#a371f7;transform:translateY(100%)}
.fx .ts:hover .s1{transform:translateY(-100%)}
.fx .ts:hover .s2{transform:translateY(0)}<div class="fx">
<button class="ts"><span class="s1">悬停切换</span><span class="s2">文字滑入</span></button>
</div>