Animated Border Call-to-Action Button

<button class="z-20 inline-block whitespace-nowrap uppercase no-underline before:absolute before:-left-[2px] before:top-[6px] before:h-[calc(100%-12px)] before:w-[calc(100%+4px)] before:bg-[#212121] before:content-[''] before:transition-transform before:duration-300 before:ease-in-out before:scale-y-100 hover:before:scale-y-0 after:absolute after:-top-[2px] after:left-[6px] after:h-[calc(100%+4px)] after:w-[calc(100%-12px)] after:bg-[#212121] after:content-[''] after:transition-transform after:duration-300 after:delay-500 after:ease-in-out after:scale-x-100 hover:after:scale-x-0 text-base font-medium text-[#fefefe] bg-[#212121] border-[#fefefe] border-2 mr-5 ml-5 pt-4 pr-8 pb-4 pl-8 relative">
            <span class="relative z-10">Start Building Free</span>
          </button>