SnakeButton

<template>
  <button
    class="relative inline-block p-px text-base font-semibold leading-6 text-white no-underline rounded-full shadow-2xl cursor-pointer bg-slate-800 group shadow-zinc-900 overflow-hidden"
    control-id="ControlID-2">
    <span
      class="absolute top-0 left-0 w-full h-1 bg-[image:linear-gradient(to_right,#0c002b,#1779ff)] animate-snakeBorderTop delay-1000"></span><span
      class="absolute top-0 right-0 w-1 h-full bg-[image:linear-gradient(to_bottom,#0c002b,#1779ff)] animate-snakeBorderLeft"></span><span
      class="absolute bottom-0 left-0 w-full h-1 bg-[image:linear-gradient(to_left,#0c002b,#1779ff)] animate-snakeBorderBottom"></span><span
      class="absolute top-0 left-0 w-1 h-full bg-[image:linear-gradient(to_top,#0c002b,#1779ff)] animate-snakeBorderRight delay-1000"></span>
    <div class="relative z-10 flex items-center px-6 py-2 space-x-2 rounded-full bg-zinc-950 ring-1 ring-white/10">
      <span>Get started</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
        height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M4.99958 12.9999C4.99958 7.91198 7.90222 3.5636 11.9996 1.81799C16.0969 3.5636 18.9996 7.91198 18.9996 12.9999C18.9996 13.8229 18.9236 14.6264 18.779 15.4027L20.7194 17.2353C20.8845 17.3913 20.9238 17.6389 20.815 17.8383L18.3196 22.4133C18.1873 22.6557 17.8836 22.7451 17.6412 22.6128C17.5993 22.59 17.5608 22.5612 17.5271 22.5274L15.2925 20.2928C15.1049 20.1053 14.8506 19.9999 14.5854 19.9999H9.41379C9.14857 19.9999 8.89422 20.1053 8.70668 20.2928L6.47209 22.5274C6.27683 22.7227 5.96025 22.7227 5.76498 22.5274C5.73122 22.4937 5.70246 22.4552 5.67959 22.4133L3.18412 17.8383C3.07537 17.6389 3.11464 17.3913 3.27975 17.2353L5.22014 15.4027C5.07551 14.6264 4.99958 13.8229 4.99958 12.9999ZM6.47542 19.6957L7.29247 18.8786C7.85508 18.316 8.61814 17.9999 9.41379 17.9999H14.5854C15.381 17.9999 16.1441 18.316 16.7067 18.8786L17.5237 19.6957L18.5056 17.8955L17.4058 16.8568C16.9117 16.3901 16.6884 15.7045 16.8128 15.0364C16.9366 14.3722 16.9996 13.6911 16.9996 12.9999C16.9996 9.13037 15.0045 5.69965 11.9996 4.04033C8.99462 5.69965 6.99958 9.13037 6.99958 12.9999C6.99958 13.6911 7.06255 14.3722 7.18631 15.0364C7.31078 15.7045 7.08746 16.3901 6.59338 16.8568L5.49353 17.8955L6.47542 19.6957ZM11.9996 12.9999C10.895 12.9999 9.99958 12.1045 9.99958 10.9999C9.99958 9.89537 10.895 8.99994 11.9996 8.99994C13.1041 8.99994 13.9996 9.89537 13.9996 10.9999C13.9996 12.1045 13.1041 12.9999 11.9996 12.9999Z">
        </path>
      </svg>
    </div>
  </button>
</template>

<script setup lang="ts"></script>

<style>
@keyframes snakeBorderBottom {
  0% {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

.animate-snakeBorderBottom {
  animation: snakeBorderBottom 2s linear infinite;
}

@keyframes snakeBorderLeft {
  0% {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(100%);
  }
}

.animate-snakeBorderLeft {
  animation: snakeBorderLeft 2s linear infinite;
}

@keyframes snakeBorderRight {
  0% {
    transform: translateY(100%);
  }

  to {
    transform: translateY(-100%);
  }
}

.animate-snakeBorderRight {
  animation: snakeBorderRight 2s linear infinite;
}

@keyframes snakeBorderTop {
  0% {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.animate-snakeBorderTop {
  animation: snakeBorderTop 2s linear infinite;
}
</style>