Pill CTA Link Button with Arrow Icon (Tailwind)

<a href="#" class="group inline-flex items-center gap-3 hover:bg-gray-800 hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm font-medium text-white bg-black rounded-full pt-3 pr-8 pb-3 pl-8">
        <span class="">All articles</span>
        <div class="relative flex items-center justify-center w-5 h-5 bg-white/20 rounded-full group-hover:bg-white/30 transition-all duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 group-hover:translate-x-0.5">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </div>
      </a>