Premium Gradient CTA Buttons

<div class="cta-buttons-container flex flex-col sm:flex-row gap-4 items-center justify-center">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap'); .font-geist { font-family: 'Geist', 'Inter', sans-serif !important; } .codepen-button{display:block;cursor:pointer;color:#fff;position:relative;text-decoration:none;font-weight:600;border-radius:100px;overflow:hidden;padding:2px;isolation:isolate}.codepen-button::before{content:"";position:absolute;inset:0;width:400%;height:100%;background:linear-gradient(115deg,#8b5cf6,#4c1d95,#a855f7);background-size:25% 100%;animation:border-shift .75s linear infinite}@keyframes border-shift{to{transform:translateX(-25%)}} .codepen-button span{position:relative;display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:1rem 1.5rem;font-size:1.1rem;background:#4c1d95;border-radius:100px;height:100%}
  </style>
  <div class="inline-block">
    <a href="#" class="codepen-button">
      <div style="position:absolute;inset:0;width:400%;height:100%;background:linear-gradient(115deg,#8b5cf6,#4c1d95,#a855f7);background-size:25% 100%;animation:border-shift .75s linear infinite;"></div>
      <span class="inline-flex items-center hover:text-white hover:bg-white/10 hover:border-white/30 transition-all duration-300 group text-base font-light text-slate-300 font-geist bg-white/5 border-white/20 border rounded-xl pt-3 pr-6 pb-3 pl-6">
        Start Free Trial
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M7 7h10v10"></path>
          <path d="M7 17 17 7"></path>
        </svg>
      </span>
    </a>
  </div>
  
</div>