Home
Krishna Gudpalle
Button Group

Button Group

This tailwind example is contributed by Krishna Gudpalle, on 09-Jul-2022. Component is made with Tailwind CSS v3.

10.8k

<button type="button"
                class="text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:border-indigo-300 px-2 py-1 text-sm ">aws
            </button>
    <button type="button"
                class="text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:border-indigo-300 px-2 py-1 text-sm ">cdk
            </button>
    <button type="button"
                class="text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:border-indigo-300 px-2 py-1 text-sm ">javascript
            </button>
    <button type="button"
                class="text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:border-indigo-300 px-2 py-1 text-sm ">typescript
            </button>
    <button type="button"
                class="text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:border-indigo-300 px-2 py-1 text-sm ">react
            </button>
    <button type="button"
                class="text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:border-indigo-300 px-2 py-1 text-sm ">python
            </button>
</div>

Related Examples

Tab navigation buttons

Author:
Simon Scheffer

2 years ago

17k
Button group
Monocolor button group

Author:
Arya

2 years ago

10.6k
Thumbs up and thumbs down buttons
Upvote downvote buttons

Author:
Prajwal Hallale

2 years ago

11.7k
Button with hover to button shadow
A beautiful button with a special shadow

Author:
Zayed Hossain

10 months ago

1.2k
Lots of button examples
tailwind button examples

Author:
QQ-VVN

3 months ago

226
Tailwind Different Button Styles
Fully Responsive Buttons

Author:
AKASH GANDHAR

1 year ago

1.6k
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.

Author:
KULDEEP

1 month ago

299
Radio Button Group for Search Filters
set of radio buttons grouped for selecting different search filters

Author:
Prajwal Hallale

1 year ago

5.4k
Gradient Button
These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

Author:
Md. Tofayel islam

1 year ago

3.5k
Simple buttons for links

Author:
Amit Pachange

2 years ago

10.6k
Buttons with Icon

Author:
_Amar_

3 years ago

15.3k
Sharp corner button design
button with hover effect

Author:
Amit Pachange

2 years ago

12k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components