Shimmer Button

shimmer x pulse

Button with shimmer sweep animation on hover. From Magic UI.

buttonshimmersweepmagicui

Code

button-shimmer.tsx

export function ShimmerButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="relative overflow-hidden rounded-lg bg-brand px-6 py-2.5 text-sm font-medium text-brand-foreground">
      <span className="relative z-10">{children}</span>
      <span className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
    </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 Shimmer Button component and wire it to my accent.”