Primary CTA Button with Offset Border Effect

<div class="flex gap-4 mt-8 items-center">
  <a href="#"
    class="group cursor-pointer select-none leading-7 flex transition-all duration-200 ease-out focus:outline-none hover:brightness-95 active:brightness-90 items-center justify-center text-base font-semibold text-[#1a1614] font-sans bg-amber-400 w-auto border-0 rounded pt-3 pr-8 pb-3 pl-8 relative rotate-[-1.5deg]">
    <span class="z-10 flex items-center gap-2 relative">
                  Explore Our Beans
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5">
                    <path d="M5 12h14"></path>
                    <path d="m12 5 7 7-7 7"></path>
                  </svg>
                </span>
    <span aria-hidden="true" class="pointer-events-none absolute border border-[#1a1614] 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 rounded"></span>
  </a>
  <button class="inline-flex gap-2 hover:text-amber-400 transition text-sm text-neutral-300 font-sans items-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polygon points="10 8 16 12 10 16 10 8"></polygon>
                </svg>
                Watch Our products
              </button>
</div>