Animated Generate Button

<button class="group relative overflow-hidden rounded-3xl bg-white text-gray-900 border-none cursor-pointer leading-none shadow-xl hover:shadow-2xl transition-all duration-300">
    <span class="absolute inset-0 z-0 bg-purple-500 -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-out"></span>
    
    <div class="flex items-center font-semibold relative overflow-hidden">
        <div class="w-12 h-10 flex items-center justify-center bg-purple-500 z-10">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.21 1.21 0 0 0 1.72 0L21.64 5.36a1.21 1.21 0 0 0 0-1.72Z"/>
                <path d="m14 7 3 3"/>
                <path d="M5 6v4"/>
                <path d="M19 14v4"/>
                <path d="M10 2v2"/>
                <path d="M7 8H3"/>
                <path d="M21 16h-4"/>
                <path d="M11 3H9"/>
            </svg>
        </div>
        <span class="inline-block py-0.5 pr-6 pl-3 overflow-hidden whitespace-nowrap text-ellipsis max-w-[150px] transition-colors duration-300 relative z-10 group-hover:text-white">
            Generate
        </span>
    </div>
</button>