Tailwind CSS Button - Nuanxa

            
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
  Blue
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:text-green-50 dark:hover:bg-green-400 transition"
>
  Green
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:text-red-50 dark:hover:bg-red-400 transition"
>
  Red
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:text-orange-50 dark:hover:bg-orange-400 transition"
>
  Orange
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg text-gray-900 bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-500 dark:text-gray-900 dark:hover:bg-yellow-400 transition"
>
  Yellow
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:text-purple-50 dark:hover:bg-purple-400 transition"
>
  Purple
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-cyan-600 hover:bg-cyan-700 dark:bg-cyan-500 dark:text-cyan-50 dark:hover:bg-cyan-400 transition"
>
  Cyan
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:text-gray-50 dark:hover:bg-gray-400 transition"
>
  Gray
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:text-pink-50 dark:hover:bg-pink-400 transition"
>
  Pink
</button>
              

            
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-500 dark:hover:text-white transition"
>
  Blue
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-green-600 text-green-600 hover:bg-green-600 hover:text-white dark:border-green-400 dark:text-green-400 dark:hover:bg-green-500 dark:hover:text-white transition"
>
  Green
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-red-600 text-red-600 hover:bg-red-600 hover:text-white dark:border-red-400 dark:text-red-400 dark:hover:bg-red-500 dark:hover:text-white transition"
>
  Red
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white dark:border-orange-400 dark:text-orange-400 dark:hover:bg-orange-500 dark:hover:text-white transition"
>
  Orange
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-yellow-500 text-yellow-600 hover:bg-yellow-500 hover:text-gray-900 dark:border-yellow-400 dark:text-yellow-300 dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition"
>
  Yellow
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white dark:border-purple-400 dark:text-purple-400 dark:hover:bg-purple-500 dark:hover:text-white transition"
>
  Purple
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-cyan-600 text-cyan-600 hover:bg-cyan-600 hover:text-white dark:border-cyan-400 dark:text-cyan-400 dark:hover:bg-cyan-500 dark:hover:text-white transition"
>
  Cyan
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-gray-500 text-gray-700 hover:bg-gray-600 hover:text-white dark:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-500 dark:hover:text-white transition"
>
  Gray
</button>
<button
  class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-pink-600 text-pink-600 hover:bg-pink-600 hover:text-white dark:border-pink-400 dark:text-pink-400 dark:hover:bg-pink-500 dark:hover:text-white transition"
>
  Pink
</button>
              

            
<button
  class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
  Blue
</button>
<button
  class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:text-green-50 dark:hover:bg-green-400 transition"
>
  Green
</button>
<button
  class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:text-red-50 dark:hover:bg-red-400 transition"
>
  Red
</button>
<button
  class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:text-orange-50 dark:hover:bg-orange-400 transition"
>
  Orange
</button>
<button
  class="px-4 py-1.5 text-sm font-semibold rounded-full text-gray-900 bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-500 dark:text-gray-900 dark:hover:bg-yellow-400 transition"
>
  Yellow
</button>
<button
  class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:text-purple-50 dark:hover:bg-purple-400 transition"
>
  Purple
</button>
<button
  class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-cyan-600 hover:bg-cyan-700 dark:bg-cyan-500 dark:text-cyan-50 dark:hover:bg-cyan-400 transition"
>
  Cyan
</button>
<button
  class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:text-gray-50 dark:hover:bg-gray-400 transition"
>
  Gray
</button>
<button
  class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:text-pink-50 dark:hover:bg-pink-400 transition"
>
  Pink
</button>
              

            
<button
  class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition"
>
  Blue <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
  class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 transition"
>
  Green <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
  class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400 transition"
>
  Red <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
  class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400 transition"
>
  Orange <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
  class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-gray-900 bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-500 dark:hover:bg-yellow-400 transition"
>
  Yellow <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
  class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-400 transition"
>
  Purple <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
  class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-cyan-600 hover:bg-cyan-700 dark:bg-cyan-500 dark:hover:bg-cyan-400 transition"
>
  Cyan <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
  class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-400 transition"
>
  Gray <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
  class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-400 transition"
>
  Pink <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
              

            
<button
  class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#1877F2] hover:bg-[#0d65d9] dark:hover:bg-[#1a6be0] transition"
>
  <i class="fa-brands fa-facebook-f"></i> Facebook
</button>
<button
  class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#000000] hover:bg-[#1a1a1a] dark:bg-[#111] dark:hover:bg-[#222] transition"
>
  <i class="fa-brands fa-x-twitter"></i> Twitter
</button>
<button
  class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 hover:opacity-90 transition"
>
  <i class="fa-brands fa-instagram"></i> Instagram
</button>
<button
  class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#0A66C2] hover:bg-[#094a8f] transition"
>
  <i class="fa-brands fa-linkedin-in"></i> LinkedIn
</button>
<button
  class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#FF0000] hover:bg-[#cc0000] transition"
>
  <i class="fa-brands fa-youtube"></i> YouTube
</button>
<button
  class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#25D366] hover:bg-[#1ebe5d] transition"
>
  <i class="fa-brands fa-whatsapp"></i> WhatsApp
</button>
<button
  class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#24292e] hover:bg-[#171a1d] dark:bg-[#333] dark:hover:bg-[#222] transition"
>
  <i class="fa-brands fa-github"></i> GitHub
</button>
<button
  class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#229ED9] hover:bg-[#1b89bd] transition"
>
  <i class="fa-brands fa-telegram"></i> Telegram
</button>
<button
  class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#010101] hover:bg-[#242424] dark:bg-[#111] dark:hover:bg-[#222] transition"
>
  <i class="fa-brands fa-tiktok"></i> TikTok
</button>