Animated Gradient Border Call-to-Action Button

<a href="#"
  class="inline-flex items-center hover:bg-zinc-800 transition-colors text-sm font-medium text-white bg-zinc-900 rounded-lg pt-1.5 pr-3 pb-1.5 pl-3"
  style="position: relative; isolation: isolate; padding: 3px; border-radius: 10px; overflow: hidden; background-color: transparent;"
  onmouseenter="this.dataset.h='1'; const g=this.querySelector('.cp-border'); if(!g) return; g.style.transition='transform .75s linear'; let dir=0; (function loop(){ if (this.dataset.h!=='1') return; dir = dir===0 ? -25 : 0; g.style.transform='translateX('+dir+'%)'; setTimeout(loop.bind(this),750); }).call(this);"
  onmouseleave="this.dataset.h='0'; const g=this.querySelector('.cp-border'); if(!g) return; g.style.transition='transform .25s ease-out'; g.style.transform='translateX(-5%)';"
  data-h="0">
  <div class="cp-border" aria-hidden="true"
    style="position: absolute; top: 0px; left: 0px; height: 100%; width: 400%; background: linear-gradient(115deg, rgb(79, 207, 112), rgb(250, 214, 72), rgb(167, 103, 229), rgb(18, 188, 254), rgb(68, 206, 123)) 0% 0% / 25% 100%; transform: translateX(-5%); z-index: 0; transition: transform 0.25s ease-out;">
  </div>
  <span style="position: relative; display: block; padding: 0.5rem 0.75rem; font-size: 0.875rem; background: #000; border-radius: 8px; height: 100%; z-index: 1;" class="">Get started</span>
</a>