AI Sparkle Button Animation CSS

A Generate with AI button made with CSS only. At rest it has a thin border in four colors. Hover it or tab to it and the border starts to turn, a blurred copy of the same gradient glows behind it, and the three sparkle stars in the icon twinkle out of step. The second button shows the busy state, which turns faster and keeps going while your request runs.

The border is a conic-gradient that starts from a registered custom property. Because @property declares that property as an angle, the browser can animate it smoothly from 0deg to 360deg, where a plain custom property would only jump between the two. The button's padding lets the gradient show as a ring around the dark inner label, and a blurred pseudo-element behind it makes the glow. The SVG stars scale and rotate around their own centers because transform-box is fill-box and transform-origin is center.

Set aria-busy and aria-disabled to true from your script when the request starts and remove both when the result comes back. aria-disabled does not block clicks, so your click handler should ignore the button while it is busy. Sizes are in em, so the button follows the font size of the place you put it. The motion stops for visitors who prefer reduced motion, and in a browser without @property the ring still shows but does not turn.