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

877

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

Button group with icon
edit, view, and delete buttons group

Author:
Timox5ty7thymix

2 years ago

17.4k
Button cloud for categories,tags etc

Author:
Kris Showen

2 years ago

13k
buttons group
some attractive button group on different varients primary, outlined and link button

Author:
Akram Khan

1 year ago

1.8k
Button Group

Author:
Krishna Gudpalle

3 years ago

10.9k
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

1.2k
Button Group

Author:
Prem..

3 years ago

9.7k
Old style Button Designs

Author:
Amit Pachange

2 years ago

10k
Buttons with Icon

Author:
_Amar_

3 years ago

15.8k
Sign in with buttons

Author:
Simon Scheffer

2 years ago

11.2k
Dioganal cuts Buttons

Author:
Adulik

2 years ago

6.9k
Tab Menu
Tab menu

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

6.3k
Button Dropdown
Drop down button with only tailwind css using focus

Author:
Shivam Vishwakarma

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components