NRVM

Back to Discover
MotionIntermediate

Shiny Button

A button with an animated conic gradient border.

Live Preview
export function ShinyButton() {
  return (
    <div className="flex w-full h-40 items-center justify-center bg-[#050505] rounded-2xl border border-border">
      <button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-zinc-400 focus:ring-offset-2 focus:ring-offset-zinc-50">
        <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
        <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-zinc-950 px-8 py-1 text-sm font-medium text-white backdrop-blur-3xl transition-colors hover:bg-zinc-900">
          Unlock Premium
        </span>
      </button>
    </div>
  );
}