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

528

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

Tab Menu
Tab menu

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

1 year ago

5.8k
Button group
Monocolor button group

Author:
Arya

2 years ago

10.6k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

6 months ago

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

Author:
Nick Girga

3 months ago

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

Author:
Akram Khan

10 months ago

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

Author:
KULDEEP

1 month ago

48
Simple buttons for links

Author:
Amit Pachange

2 years ago

10.6k
Tag links component

Author:
Arya

2 years ago

8.7k
Tab navigation buttons

Author:
Simon Scheffer

2 years ago

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

Author:
Алла Телегина

5 months ago

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

2 months ago

501
button animation
button animation big

Author:
QQ-VVN

3 months ago

216

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components