这是一款渐变描边引导按钮效果,纯 CSS 实现,没有用任何 JS 动画。按钮左侧是一圈虚线进度环,中间显示完成百分比,右侧是标题、副标题和箭头,底部还透出一层柔和的彩色光晕,像是从下方打上来的灯光。
它的动效设计得挺细:一圈彩色渐变沿着边框慢慢转,但只在按钮下半部分显现、往上逐渐淡出,所以看着像是光从底部溢出来的,而不是死板的一整圈跑马灯。鼠标移上去,转速加快还会反向,进度环从 20% 平滑涨到 80%,数字跟着一起变,箭头往右挪一点——几个动作同时发生但节奏错开,手感很舒服。
技术上用了几个比较新的 CSS 特性:注册自定义属性让渐变角度和百分比这类数值也能做补间动画,配合遮罩合成实现只描边不填充的渐变边框。颜色用的是 oklch 色彩空间,过渡比传统写法更自然。这些特性在新版浏览器里没问题,老浏览器会退化成静态按钮,不影响点击。
适合引导用户完成注册、认证、资料填写的入口按钮,也适合会员升级、任务进度、SaaS 后台的行动号召位。