Rainbow Button

animated x gradient

Button with animated rainbow gradient border. From Magic UI.

buttonrainbowgradientmagicui

Code

button-rainbow.tsx

export function RainbowButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="relative rounded-lg bg-gradient-to-r from-violet-500 via-fuchsia-500 to-orange-500 p-px">
      <span className="block rounded-[7px] bg-background px-5 py-2 text-sm font-medium">
        {children}
      </span>
    </button>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Rainbow Button component and wire it to my accent.”