Animated Gradient CTA Button with Hover Glow

<a href="#" class="relative h-12 overflow-hidden transition-all duration-500 group inline-flex rounded-lg pr-8 pl-8 hover:scale-105 hover:shadow-2xl hover:shadow-indigo-500/30 cursor-pointer" style="animation: pulse-glow 3s ease-in-out infinite;">
  <div class="absolute inset-0 rounded-lg p-[2px] bg-gradient-to-b from-[#4f46e5] via-[#1e1b4b] to-[#312e81] group-hover:from-[#6366f1] group-hover:via-[#3730a3] group-hover:to-[#4338ca] transition-all duration-300">
    <div class="absolute inset-0 bg-[#1e1b4b] rounded-lg opacity-90 group-hover:opacity-95 transition-opacity duration-300"></div>
  </div>
  <div class="absolute inset-[2px] bg-[#1e1b4b] rounded-lg opacity-95 group-hover:opacity-100 transition-opacity duration-300"></div>
  <div class="absolute inset-[2px] bg-gradient-to-r from-[#1e1b4b] via-[#312e81] to-[#1e1b4b] rounded-lg opacity-90 group-hover:opacity-100 transition-opacity duration-300"></div>
  <div class="absolute inset-[2px] bg-gradient-to-b from-[#4f46e5]/40 via-[#312e81] to-[#3730a3]/30 rounded-lg opacity-80 group-hover:opacity-90 transition-opacity duration-300"></div>
  <div class="absolute inset-[2px] bg-gradient-to-br from-[#6366f1]/10 via-[#312e81] to-[#1e3a8a]/50 rounded-lg group-hover:from-[#6366f1]/20 group-hover:to-[#1e3a8a]/70 transition-all duration-300"></div>
  <div class="absolute inset-[2px] shadow-[inset_0_0_15px_rgba(99,102,241,0.15)] rounded-lg group-hover:shadow-[inset_0_0_25px_rgba(99,102,241,0.25)] transition- opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-r from-transparent via-[#6366f1]/10 to-transparent" style="animation: shimmer 2s ease-in-out infinite;"></div>
  <div class="relative flex items-center justify-center gap-2 group-hover:gap-3 transition-all duration-300">
    <span class="text-lg font-normal bg-gradient-to-b from-[#a5b4fc] to-[#6366f1] bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(99,102,241,0.4)] tracking-tighter group-hover:drop-shadow-[0_0_20px_rgba(99,102,241,0.6)] group-hover:scale-105 transition-all duration-300" style="animation: text-glow 2s ease-in-out infinite;">
      Schedule Demo
    </span>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="url(#gradient)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar w-4 h-4 group-hover:translate-x-1 group-hover:scale-110 transition-all duration-300" style="animation: arrow-pulse 2s ease-in-out infinite;">
      <defs class="">
        
      </defs>
      <path d="M8 2v4" class=""></path>
      <path d="M16 2v4" class=""></path>
      <rect width="18" height="18" x="3" y="4" rx="2" class=""></rect>
      <path d="M3 10h18" class=""></path>
    </svg>
  </div>
  <div class="absolute inset-[2px] opacity-0 transition-opacity duration-300 group-hover:opacity-100 rounded-lg"></div>
  <style>
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
      50% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.5), 0 0 40px rgba(99, 102, 241, 0.2); }
    }
    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    @keyframes text-glow {
      0%, 100% { filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.4)); }
      50% { filter: drop-shadow(0 0 16px rgba(99, 102, 241, 0.6)); }
    }
    @keyframes arrow-pulse {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(2px); }
    }
    #aura-emf54cqzx:active {
      transform: scale(0.98);
      transition: transform 0.1s ease;
    }
    #aura-emf54cqzx:hover {
      animation-play-state: paused;
    }
  </style>
</a>