Rotating Gradient Border

A bright arc travels around the edge of the button, drawing attention to it without moving the button itself.

CSS
Buttons
Loop
Added 2026-10-29

AI prompt

Create a button with a gradient border that rotates around it in pure CSS. Register a custom property with @property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false }. Give the button a 2px transparent border and two backgrounds: the surface colour clipped to padding-box, and a conic-gradient(from var(--angle), transparent 0 60%, accent 80%, light ink 90%, transparent) clipped to border-box. Animate --angle from 0deg to 360deg over 3s linear infinite so the bright arc circles the edge. Speed it up to 1.2s on hover. Under prefers-reduced-motion, stop the rotation and show a static accent border. The label reads "Join the beta".

Source

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;
  }
}