Animated Gradient Hover Button

<div class="flex items-center justify-center min-h-screen bg-neutral-900">
  <button
    class="group inline-flex min-w-[180px] cursor-pointer transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] overflow-hidden text-base font-medium text-white h-[48px] rounded-full pt-3 pr-6 pb-3 pl-6 relative items-center justify-center shadow-[inset_0_2px_8px_rgba(255,255,255,0.25),_inset_0_-3px_8px_rgba(0,0,0,0.35),_0_4px_10px_rgba(0,0,0,0.4)]"
    style="background: linear-gradient(45deg, #06b6d4, #3b82f6, #2563eb);"
    type="button"
    aria-label="Generate My Code"
    title="Generate My Code"
  >
    <!-- Text animation layers -->
    <span
      class="relative z-10 transition-all duration-500 ease-out group-hover:translate-y-8 group-hover:opacity-0 group-hover:blur-md"
    >
      Generate My Code
    </span>
    <span
      class="z-10 flex items-center justify-center transition-all duration-300 ease-in-out transform -translate-y-8 group-hover:translate-y-0 group-hover:opacity-100 group-hover:blur-none font-medium opacity-0 absolute top-0 right-0 bottom-0 left-0"
    >
      Generate My Code
    </span>

    <!-- Glow effect -->
    <span
      aria-hidden="true"
      class="absolute inset-0 rounded-full opacity-0 transition-opacity duration-500 hover:opacity-100 blur-[20px]"
      style="background: linear-gradient(45deg, #06b6d4, #3b82f6, #2563eb); z-index: -1;"
    ></span>
  </button>
</div>