悬停时锥形进度环走满一圈,圆形按钮的进度表达
← 返回 按钮 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx{padding:36px 0}
.fx .cpb{position:relative;width:96px;height:96px;margin:0 auto;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;transition:background .8s}
.fx .cpb::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#4a9eff 0deg,#2d3748 0deg)}
.fx .cpb::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#161b22}
.fx .cpb span{position:relative;z-index:1}
.fx .cpb:hover::before{background:conic-gradient(#4a9eff 360deg,#2d3748 360deg)}<div class="fx">
<button class="cpb"><span>GO</span></button>
</div>