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 v3.4. It is responsive.

Button Group

Author zobaidul kaziex

Tailwind v3.4 1.8k 3

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

Buttons in pair

Amit Pachange

3 years ago

11.1k
Button Group

Krishna Gudpalle

4 years ago

11.8k
Button group
Monocolor button group

Arya

3 years ago

11.8k
Simple buttons for links

Amit Pachange

3 years ago

11.6k
Previous Next Buttons
Pagination buttons

Alok

4 years ago

15.4k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Alla Telegina

1 year ago

2k
Buttons with Icon

_Amar_

4 years ago

16.8k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

KULDEEP

1 year ago

1.4k
Elegant Buttons
Useful Tailwind classes for creating several types of basic buttons.

Nick Girga

1 year ago

1.5k
Dioganal cuts Buttons

Adulik

3 years ago

7.6k
Disabled Button & Active Button

Dipti narayan

3 years ago

38.4k
Old style Button Designs

Amit Pachange

3 years ago

11k