流光渐变边框按钮

Animated Gradient Border Button

中级网页

一圈彩色渐变沿着按钮的边框缓缓旋转，背后还垫着一层同色的模糊光晕，鼠标移上去流光加速。AI 产品特别爱用它来标「用 AI 生成」「升级专业版」这类按钮，一眼就能看出是最特别的那个。

你可能会说：「「用 AI 生成」那个按钮能不能做成边框有一圈彩色光在转的效果，像很多 AI 产品那样？」

效果预览一圈彩色流光绕着按钮转

正在加载演示…

怎么做3 步做出来

1
注册一个可以做动画的角度变量
渐变本身没法直接旋转，我们转的是渐变的起始角度。普通 CSS 变量不能做动画（浏览器不知道它是角度，只会瞬间跳变），要先用 @property 告诉浏览器：这个变量是一个角度，初始值 0deg。
查看代码收起代码css
```
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  to { --angle: 360deg; }
}
```
2
用两层背景做出「只有边框是渐变」
边框设成透明，再叠两层背景：上层是按钮底色，只铺到内边距区域（padding-box）；下层是锥形渐变，铺到边框区域（border-box）。于是露出来的那一圈 2px 就是渐变边框。让 --angle 一直转，渐变就沿着边框流动。
查看代码收起代码css
```
.glow-button {
  position: relative;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  color: #fff;
  background:
    linear-gradient(#0b1020, #0b1020) padding-box,
    conic-gradient(from var(--angle), #6366f1, #22d3ee, #a855f7, #6366f1) border-box;
  animation: spin 3s linear infinite;
}
```

背后的光晕和悬停加速

用 ::before 再画一份同样的渐变，模糊后放到按钮背后，就是外圈的光晕；z-index: -1 要生效，按钮的父元素需要建立层叠上下文（比如 isolation: isolate）。悬停时缩短动画时长让流光加速。不支持 @property 的浏览器会显示静止的渐变边框，开启减少动效时也停下来。

查看代码css

.glow-button::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--angle), #6366f1, #22d3ee, #a855f7, #6366f1);
  filter: blur(14px);
  opacity: 0.7;
  animation: inherit;
}
.glow-button-wrap { isolation: isolate; }

.glow-button:hover,
.glow-button:hover::before { animation-duration: 1s; }

@media (prefers-reduced-motion: reduce) {
  .glow-button, .glow-button::before { animation: none; }
}

适合放在哪

适合用

AI 产品里的「用 AI 生成」「智能改写」按钮，标出最特别的功能入口。
定价页的「升级专业版」按钮，或者推荐套餐卡片的边框。
深色背景的官网首屏主按钮。

不适合用

一页上别放好几个流光按钮；每个都在转，就没有哪个是特别的了。
浅色背景上光晕几乎看不出来，别硬用；改用实心的渐变按钮。
表单的普通提交、取消按钮，别加流光；它们不需要抢注意力。

让 AI 帮你做复制给 AI Agent 直接用

请把【页面上最想突出的按钮，如：编辑器里的「用 AI 生成」按钮】做成流光渐变边框。先阅读按钮组件和样式写法，确认按钮所在背景色、是否已有渐变配色变量。要求：用 @property 注册一个角度变量并做 360° 循环动画（约 3 秒一圈）；边框透明，背景用两层：按钮底色铺 padding-box，锥形渐变铺 border-box；用 ::before 画一层模糊的同色光晕放在背后，并给父元素建立层叠上下文；悬停加速；不支持 @property 时显示静止渐变；开启减少动效时停止动画。按钮的文字对比度、焦点样式和点击行为保持不变。不改无关代码。最后说明在 Chrome、Safari、Firefox 里分别怎么检查效果。

用到的知识

渐变关键帧按钮减少动效