Gradient Hover CTA Button with Shine Effect

<a href="#" class="inline-flex items-center gap-2 ring-1 ring-white/10 shadow-[0_10px_40px_-10px_rgba(139,92,246,0.6)] hover:shadow-[0_15px_50px_-10px_rgba(139,92,246,0.8)] transition-all duration-300 relative overflow-hidden text-sm font-medium text-white tracking-tight bg-gradient-to-tr from-violet-600 to-fuchsia-600 border-2 rounded-full pt-3 pr-6 pb-3 pl-6" style="border-color: rgba(255, 255, 255, 0.3); cursor: pointer; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'; this.style.borderColor='rgba(255, 255, 255, 0.6)'; this.querySelector('.lucide-rocket').style.transform='translateX(4px)'" onmouseout="this.style.transform='scale(1)'; this.style.borderColor='rgba(255, 255, 255, 0.3)'; this.querySelector('.lucide-rocket').style.transform='translateX(0px)'" onmouseenter="this.querySelector('.shine-effect').style.animation='shine 1.5s ease-out infinite'" onmouseleave="this.querySelector('.shine-effect').style.animation='none'">
  <div class="shine-effect" style="content: &quot;&quot;; position: absolute; width: 100px; height: 100%; background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%); top: 0px; left: -100px; opacity: 0.6; pointer-events: none; animation: auto ease 0s 1 normal none running none;"></div>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket h-4 w-4" style="transition: 0.3s ease-in-out; transform: translateX(0px);"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></svg>
  Start free 14-day trial
  <style>
    @keyframes shine {
      0% { left: -100px; }
      60% { left: 100%; }
      to { left: 100%; }
    }
  </style>
</a>