On hover, a large conic-gradient layer (spanning indigo → violet → pink → amber → emerald) fades in behind the button text and spins continuously via a rotate(360deg) keyframe animation. A subtle dark overlay keeps the white text readable against the vivid gradient. No dependencies.
Goal: Create a "Rotating Gradient" button animation.
Visual behavior: At rest, the button is dark (#09090b). On hover, a vivid conic-gradient (indigo → violet → pink → amber → emerald → indigo) fades in behind the text and spins continuously. A subtle dark overlay (rgba(0,0,0,0.25)) sits above the gradient to keep the white text readable. The gradient fades out on mouseleave.
Technique: Three layers inside the button (all position:absolute inset:0): (1) dark base, (2) spinning conic-gradient layer — a 400×400px div centered via margin -200px, animated with @keyframes btn-gradient-spin { to { transform: rotate(360deg) } } when hovered, (3) the dark overlay for contrast. The spin layer's opacity transitions from 0 to 0.9 on hover. Use a data attribute to toggle the CSS animation. Use React useState for the hovered state.
Accessibility: Spin animation disabled under prefers-reduced-motion. The gradient fade-in is still applied.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.