Animated Border Button

<div class="inline-block">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap'); @keyframes animate1 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes animate2 { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } @keyframes animate3 { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes animate4 { 0% { transform: translateY(100%); } 100% { transform: translateY(-100%); } }
  </style>
  <a href="#" target="_blank" class="relative px-[60px] py-[30px] shadow-[0_0_10px_5px_rgba(0,0,0,0.4)] text-gray-400 hover:text-cyan-300 no-underline uppercase tracking-[4px] font-bold overflow-hidden inline-block text-[30px] select-none transition-colors duration-300" style="font-family: 'JetBrains Mono', Consolas, monospace;">
    Getting Started
    <span class="absolute top-0 right-0 w-full h-[3px]" style="background: linear-gradient(to right, #171618, #37F4FA); animation: animate1 2s linear infinite;"></span>
    <span class="absolute top-0 right-0 h-full w-[3px]" style="background: linear-gradient(to bottom, #171618, #37F4FA); animation: animate2 2s linear infinite; animation-delay: 1s;"></span>
    <span class="absolute bottom-0 right-0 w-full h-[3px]" style="background: linear-gradient(to left, #171618, #37F4FA); animation: animate3 2s linear infinite;"></span>
    <span class="absolute top-0 left-0 h-full w-[3px]" style="background: linear-gradient(to top, #171618, #37F4FA); animation: animate4 2s linear infinite; animation-delay: 1s;"></span>
  </a>
</div>