Stylized CTA Button with Hover Offset Border

<button type="button" role="button" style="touch-action: manipulation;" class="group relative w-full cursor-pointer select-none md:text-xl leading-7 flex md:px-12 transition-all duration-200 ease-out focus:outline-none hover:brightness-95 active:brightness-90 text-base font-bold text-black bg-blue-300 border-0 pt-3 pr-[1.65rem] pb-3 pl-[1.65rem] rotate-[-2deg] items-center justify-center max-w-xs">
        <span class="relative z-10">Sign Up</span>

        <!-- Offset border effect (replaces :after) -->
        <span aria-hidden="true" class="pointer-events-none absolute border border-black bottom-1 left-1 w-[calc(100%-1px)] h-[calc(100%-1px)] transition-all duration-200 ease-out group-hover:bottom-0.5 group-hover:left-0.5"></span>
      </button>