Glassmorphic CTA Button with Hover Animation

<button class="group relative overflow-hidden cursor-pointer leading-none hover:shadow-2xl transition-all duration-300 text-white bg-white/10 border-white/10 border rounded-full shadow-sm backdrop-blur" style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 16px 32px; min-height: 56px; min-width: 160px;">
    <span class="absolute inset-0 z-0 -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-out bg-white/5"></span>
    
    <div class="flex relative overflow-hidden font-semibold items-center justify-center" style="gap: 8px;">
        <div class="flex items-center justify-center z-10">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path>
            </svg>
        </div>
        <span class="inline-block transition-colors duration-300 relative z-10 group-hover:text-white font-semibold text-white" style="font-size: 16px;">
            View Demo
        </span>
    </div>
</button>