MOTION HUB

渐变描边按钮

Gradient Border Button
#gradient-border-btn · 18/72
HOVER · 悬停交互

参数调改

PLAYGROUND
描边色 A--border_a
描边色 B--border_b
描边色 C--border_c
文字颜色--text_color
旋转周期--spin_ms
12009000
ms
按钮圆角--radius_px
4999
px
描边宽度--border_w
14
px

实现要点

NOTES
  1. 01

    按钮自身是 conic-gradient 填充层,用 padding: var(--bw) 撑出描边厚度,内部 label 元素以同款圆角盖住中心只露出边缘一圈渐变——比 border-image 圆角更自由。

  2. 02

    --gb_angle 必须用 @property 注册为 <angle> 才能在 keyframes 里插值旋转,否则 conic 渐变只会逐帧跳变;Chrome/Edge 85+ 支持。

  3. 03

    内层圆角 = 外层圆角 - 描边宽度,保证任何圆角/描边宽度组合下转角处既不露底也不叠边。

  4. 04

    hover 内部填充复用同一个 --gb_angle 变量,渐变方向随描边一起旋转,观感是『按钮内部被流动的光填了一层薄色』。

  5. 05

    只动注册后的自定义属性(合成器路径的渐变插值),不改布局属性;不支持 @property 的环境降级为静态三色描边,按钮功能不受影响。

  6. 06

    reduced-motion:停止旋转,保留 0deg 起始的静态三色描边。

源代码

SOURCE

加载源代码…