Cosmic Button

cosmic x orbit

Button with orbiting particles and cosmic glow. From Cult UI.

buttoncosmicorbitcultui

Code

button-cosmic.tsx

import { Sparkles } from "lucide-react";

export function CosmicButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="relative overflow-hidden rounded-full bg-gradient-to-r from-indigo-900 via-purple-900 to-indigo-900 px-8 py-3 text-sm font-medium text-white shadow-lg shadow-purple-500/30
      before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_50%_0%,rgba(120,80,255,0.3),transparent_60%)]">
      <Sparkles className="mr-2 inline size-4" />{children}
    </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 Cosmic Button component and wire it to my accent.”