Gradient Hover CTA Button

<a href="#" class="relative h-12 overflow-hidden transition-all duration-500 group inline-flex rounded-lg pr-8 pl-8">
  <div class="absolute inset-0 rounded-lg p-[2px] bg-gradient-to-b from-[#654358] via-[#17092A] to-[#2F0D64]">
    <div class="absolute inset-0 bg-[#170928] rounded-lg opacity-90"></div>
  </div>
  <div class="absolute inset-[2px] bg-[#170928] rounded-lg opacity-95"></div>
  <div class="absolute inset-[2px] bg-gradient-to-r from-[#170928] via-[#1d0d33] to-[#170928] rounded-lg opacity-90"></div>
  <div class="absolute inset-[2px] bg-gradient-to-b from-[#654358]/40 via-[#1d0d33] to-[#2F0D64]/30 rounded-lg opacity-80"></div>
  <div class="absolute inset-[2px] bg-gradient-to-br from-[#C787F6]/10 via-[#1d0d33] to-[#2A1736]/50 rounded-lg"></div>
  <div class="absolute inset-[2px] shadow-[inset_0_0_15px_rgba(199,135,246,0.15)] rounded-lg"></div>
  <div class="relative flex items-center justify-center gap-2">
    <span class="text-lg font-normal bg-gradient-to-b from-[#D69DDE] to-[#B873F8] bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(199,135,246,0.4)] tracking-tighter">
      Book an Appointment
    </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-arrow-right w-4 h-4">
      <defs class="">
        
      </defs>
      <path d="M5 12h14" class=""></path>
      <path d="m12 5 7 7-7 7" class=""></path>
    </svg>
  </div>
  <div class="absolute inset-[2px] opacity-0 transition-opacity duration-300 group-hover:opacity-100 bg-gradient-to-r from-[#1e3a8a]/20 via-[#3b82f6]/10 to-[#1e3a8a]/20 rounded-lg"></div>
</a>