Icon Morph Button

"use client";

import { Check, Send } from "lucide-react";
import { useState } from "react";

export function IconMorphButton() {
  const [sent, setSent] = useState(false);

  return (
    <button
      type="button"
      onClick={() => {
        setSent(true);
        window.setTimeout(() => setSent(false), 1600);
      }}
      className="group flex items-center gap-2 rounded-lg bg-amber-500 px-6 py-3 text-sm font-semibold text-neutral-950"
    >
      {sent ? "Sent" : "Send"}
      <span className="relative size-4 overflow-hidden">
        <Send
          className={
            "absolute size-4 transition-all duration-300 " +
            (sent
              ? "-translate-y-4 opacity-0"
              : "translate-y-0 opacity-100 group-hover:translate-x-0.5 group-hover:-translate-y-0.5")
          }
        />
        <Check
          className={
            "absolute size-4 transition-all duration-300 " +
            (sent ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0")
          }
        />
      </span>
    </button>
  );
}