Shimmer Button

Featured

by Dax · tsx · 16 lines

A CTA button with a traveling shimmer highlight that sweeps across on hover. The gradient animation runs on the GPU so it stays smooth even on low-end devices.

buttonctashimmergradient

16 lines

export function ShimmerButton({ children, className = "" }: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <button
      className={`group relative inline-flex items-center justify-center overflow-hidden rounded-full bg-neutral-950 px-8 py-3 text-sm font-medium text-white transition-shadow hover:shadow-[0_0_24px_rgba(34,197,94,0.25)] ${className}`}
    >
      <span className="absolute inset-0 overflow-hidden rounded-full">
        <span className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-700 ease-out group-hover:translate-x-full" />
      </span>
      <span className="relative z-10">{children}</span>
    </button>
  );
}

← Back to Magic UI