Home
zobaidul kaziex
Button group involves using utility classes

Button group involves using utility classes

Background colors, hover effects, and animations to the button group using only Tailwind CSS

This tailwind example is contributed by zobaidul kaziex, on 21-Jan-2025. Component is made with Tailwind CSS v3. It is responsive.

Button Group

Author zobaidul kaziex

1.2k

Fork Fullscreen

<div class="flex justify-center items-center h-screen">
  <div class="inline-flex rounded-md shadow-sm space-x-2" role="group">
    
    <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-gray-300 rounded-l-lg hover:bg-blue-600 focus:outline-none transition duration-300 ease-in-out transform hover:scale-105">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
      </svg>
      Button 1
    </button>

<button type="button" class="px-4 py-2 text-sm font-medium text-white bg-green-500 border-t border-b border-gray-300 hover:bg-green-600 focus:outline-none transition duration-300 ease-in-out transform hover:scale-105">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m7-7H5"></path>
      </svg>
      Button 2
    </button>

<button type="button" class="px-4 py-2 text-sm font-medium text-white bg-red-500 border-t border-b border-gray-300 rounded-r-lg hover:bg-red-600 focus:outline-none transition duration-300 ease-in-out transform hover:scale-105">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5"></path>
      </svg>
      Button 3
    </button>

<button type="button" class="px-4 py-2 text-sm font-medium text-white bg-yellow-500 border-t border-b border-gray-300 hover:bg-yellow-600 focus:outline-none transition duration-300 ease-in-out transform hover:scale-105">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v8m4-4H8"></path>
      </svg>
      Button 4
    </button>
  </div>
</div>

Related Examples