Gradient Border

Create a rotating gradient border button. A pill button whose border is a conic gradient revolving continuously around it. Structure: the button clips its content (overflow hidden, fully rounded); behind the content sits an oversized square layer (about 2.2x the button's larger dimension, centered) filled with a conic gradient: transparent for most of the sweep, warming through a soft accent glow (25% alpha around 60deg) into the full accent color at ~120deg, cooling back to transparent by ~220deg. Rotate that layer 360deg on a linear loop, about 3.5s per revolution. An inner cover (inset 1.5px, same rounding, surface background) leaves only a 1.5px ring of the gradient visible, so the revolving beam-and-glow reads as a live border. On hover, scale the button to 1.03 and speed the revolution up to ~2s. Keep a faint hairline border on the inner cover so the edge reads even where the gradient is transparent. Accessibility: the moving border is decorative: aria-hidden on the gradient layer; label the button normally. If prefers-reduced-motion is set, stop the rotation and show the gradient as a static border. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.