悬停时描边从左上角接力走一圈，笔画感十足
← 返回 按钮 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .draw{position:relative;display:block;width:200px;margin:50px auto;padding:16px 0;text-align:center;color:#4a9eff;border:none;background:transparent;font-size:16px;cursor:pointer}
.fx .draw::before,.fx .draw::after{content:"";position:absolute;width:0;height:0;border:2px solid #4a9eff;box-sizing:border-box;transition:width .3s,height .3s}
.fx .draw::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.fx .draw::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.fx .draw:hover::before{width:calc(100% + 4px);height:calc(100% + 4px)}
.fx .draw:hover::after{width:calc(100% + 4px);height:calc(100% + 4px);transition-delay:.3s}<div class="fx">
<button class="draw">悬停描边</button>
</div>