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

656

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

Dioganal cuts Buttons

Author:
Adulik

2 years ago

6.8k
Tab navigation buttons

Author:
Simon Scheffer

2 years ago

17.2k
Tab Menu
Tab menu

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

1 year ago

6k
Buttons in pair

Author:
Amit Pachange

2 years ago

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

Author:
Akram Khan

11 months ago

1.5k
Tailwind Different Button Styles
Fully Responsive Buttons

Author:
AKASH GANDHAR

1 year ago

1.7k
Social buttons
Mono-color Social buttons change colors according to your need

Author:
Arya

2 years ago

11.4k
beautiful buttons set
a beautofull buttons set like primary, outline and text.

Author:
Akram Khan

10 months ago

958
Button group
nice and simple buttons with a hover effect

Author:
Sophia Baker

2 years ago

7.7k
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)

3 months ago

638
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

2 months ago

63
Sharp corner button design
button with hover effect

Author:
Amit Pachange

2 years ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components