Brutalism Add to Cart Button

<div class="p-4 sm:p-6 md:p-8 flex items-center justify-center min-h-screen bg-gray-100 dark:bg-zinc-900 font-sans">
  <button class="relative group overflow-hidden px-6 py-3 bg-red-600 text-white font-black uppercase tracking-wider border-4 border-black dark:border-white text-lg sm:text-xl md:text-2xl transition-all duration-300 ease-in-out
    shadow-[8px_8px_0_0_#A855F7] hover:shadow-[12px_12px_0_0_#A855F7] dark:shadow-[8px_8px_0_0_#EC4899] dark:hover:shadow-[12px_12px_0_0_#EC4899]
    hover:-translate-y-1 hover:-translate-x-1 focus:outline-none focus:ring-4 focus:ring-offset-4 focus:ring-red-500 dark:focus:ring-pink-500 dark:focus:ring-offset-zinc-900">
    
    <span class="absolute inset-0 bg-purple-600 dark:bg-pink-600 border-4 border-black dark:border-white -z-10
      transform translate-x-2 translate-y-2 group-hover:translate-x-3 group-hover:translate-y-3 transition-all duration-300 ease-in-out"></span>
    
    <span class="flex items-center space-x-3">
      <svg class="w-7 h-7 sm:w-8 sm:h-8 md:w-9 md:h-9" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
      </svg>
      <span>Add to Cart</span>
    </span>

  </button>
</div>