Interactive Hover Button

/* Source: Magic UI — https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/interactive-hover-button.tsx — MIT. Included under its original licence. */
/* Copyright (c) Magic UI */

import * as React from "react";

const cx = (...classes: Array<string | false | undefined>) =>
  classes.filter(Boolean).join(" ");

function ArrowRightIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M5 12h14" />
      <path d="m12 5 7 7-7 7" />
    </svg>
  );
}

export const InteractiveHoverButton = React.forwardRef<
  HTMLButtonElement,
  React.ButtonHTMLAttributes<HTMLButtonElement>
>(({ children, className, ...props }, ref) => {
  return (
    <button
      ref={ref}
      className={cx(
        "group relative w-auto cursor-pointer overflow-hidden rounded-full border border-zinc-200 bg-white p-2 px-6 text-center font-semibold text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-white",
        className,
      )}
      {...props}
    >
      <div className="flex items-center justify-center gap-2">
        <div className="h-2 w-2 rounded-full bg-zinc-900 transition-all duration-300 group-hover:scale-[100.8] dark:bg-white" />
        <span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
          {children}
        </span>
      </div>
      <div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-white opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100 dark:text-zinc-900">
        <span>{children}</span>
        <ArrowRightIcon />
      </div>
    </button>
  );
});
InteractiveHoverButton.displayName = "InteractiveHoverButton";

export default function SrcInteractiveHoverButton() {
  return (
    <section className="flex min-h-[240px] items-center justify-center bg-white px-6 py-20 dark:bg-zinc-950">
      <InteractiveHoverButton>Get Started</InteractiveHoverButton>
    </section>
  );
}