悬停时描边光环向外扩散，聚焦且不抢眼
← 返回 按钮 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .rg{position:relative;display:block;width:200px;margin:56px auto;padding:13px 0;text-align:center;border:none;border-radius:10px;background:#a371f7;color:#fff;font-size:15px;cursor:pointer}
.fx .rg::after{content:"";position:absolute;inset:0;border-radius:10px;border:2px solid #a371f7;opacity:0;transition:all .4s}
.fx .rg:hover::after{inset:-9px;opacity:1}<div class="fx">
<button class="rg">光晕扩散</button>
</div>