旋转渐变边框

一段亮色弧线沿着按钮边缘绕圈，在按钮本身不动的情况下吸引注意。

CSS
按钮
循环
收录于 2026-10-29

AI 提示词

用纯 CSS 制作边框渐变绕圈旋转的按钮。用 @property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false } 注册自定义属性。按钮设置 2px 透明边框和两层背景：裁切到 padding-box 的底色，以及裁切到 border-box 的 conic-gradient(from var(--angle), transparent 0 60%, 主色 80%, 浅色文字色 90%, transparent)。用 3s linear infinite 把 --angle 从 0deg 动到 360deg，让亮色弧线沿边缘绕圈。悬停时加速到 1.2s 一圈。在 prefers-reduced-motion 下停止旋转，显示静态的主色边框。按钮文字为“加入内测”。

源代码

Demo.tsx

'use client'

import s from './demo.module.css'

export default function GradientBorder({ labels }: { labels: Record<string, string> }) {
  return (
    <button type="button" className={s.button}>
      {labels.cta}
    </button>
  )
}

demo.module.css

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.button {
  height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--radius-sm);
  font: 500 var(--text-base) / 1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 999px;
  color: var(--stage-ink);
  background:
    linear-gradient(var(--stage-surface), var(--stage-surface)) padding-box,
    conic-gradient(from var(--angle), transparent 0 60%, var(--stage-accent) 80%, var(--stage-ink) 90%, transparent) border-box;
  animation: spin 3s linear infinite;
}

.button:hover { animation-duration: 1.2s; }
.button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

@keyframes spin {
  to { --angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .button {
    animation: none;
    background: linear-gradient(var(--stage-surface), var(--stage-surface)) padding-box, var(--stage-accent) border-box;
  }
}