Submit Button

Submit button with arrow animation

Installation

Install Dependencies

npm i clsx tailwind-merge framer-motion

Create @/utils/cn.ts file

import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Submit Button Component

import { cn } from "@/lib/utils";

interface SubmitArrowProps {
  className?: string;
  children: string;
  onClick?: () => void;
}

export default function SubmitArrowButton({ className, children, onClick }: SubmitArrowProps) {
  return (
    <button
      type="button"
      className={cn(
        "group relative flex w-48 items-center justify-center overflow-hidden rounded-lg border-2 border-green-500 py-2 text-2xl uppercase text-green-500 no-underline",
        className
      )}
      onClick={onClick}
    >
      <span className="relative z-10 transition-all duration-300 ease-in-out group-hover:-translate-x-8">{children}</span>
      <span className="absolute inset-y-0 right-full w-[32%] bg-green-500 transition-all duration-300 ease-in-out group-hover:right-0" />
      <span className="absolute right-4 top-1/2 z-20 h-6 w-6 -translate-y-1/2 bg-[url('https://cdn-icons-png.flaticon.com/128/109/109617.png')] bg-contain bg-center bg-no-repeat opacity-0 transition-all duration-300 ease-in-out group-hover:opacity-100 group-hover:delay-200" />
    </button>
  );
}