Shining Button

shine x beam

Button with animated shine/beam sweep across surface. From Animata.

buttonshinebeamanimata

Code

button-shine.tsx

export function ShineButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="relative overflow-hidden rounded-lg bg-brand px-8 py-3 text-sm font-medium text-brand-foreground
      before:absolute before:inset-0 before:-translate-x-full before:animate-[shine_2s_ease-in-out_infinite]
      before:bg-gradient-to-r before:from-transparent before:via-white/25 before:to-transparent">
      {children}
    </button>
  );
}
/* CSS: @keyframes shine { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } } */

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 Shining Button component and wire it to my accent.”