Home
Manuela Bianka
Buttons examples

Buttons examples

This tailwind example is contributed by Manuela Bianka, on 17-Jan-2023. Component is made with Tailwind CSS v3.

12.6k

<div class="bg-white px-6 py-4 my-3 w-3/4 mx-auto shadow rounded-md flex items-center">
            <div class="w-full text-center mx-auto">
                <button
					class="border border-indigo-500 bg-indigo-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-indigo-600 focus:outline-none focus:shadow-outline">
					Primary
				</button>
                <button
					class="border border-green-500 bg-green-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-green-600 focus:outline-none focus:shadow-outline">
					Success
				</button>
                <button
					class="border border-red-500 bg-red-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-red-600 focus:outline-none focus:shadow-outline">
					Error
				</button>
                <button
					class="border border-yellow-500 bg-yellow-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-yellow-600 focus:outline-none focus:shadow-outline">
					Warning
				</button>
                <button
					class="border border-teal-500 bg-teal-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-teal-600 focus:outline-none focus:shadow-outline">
					Info
				</button>
                <button
					class="border border-gray-700 bg-gray-700 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline">
					Dark
				</button>
                <button
					class="border border-gray-200 bg-gray-200 text-gray-700 rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-gray-300 focus:outline-none focus:shadow-outline">
					Light
				</button>
            </div>
        </div>
    </div>
</div>

Related Examples

Confirm and cancel buttons

Author:
Samuel Dawson

3 years ago

16.3k
Buttons variations

Author:
R.P Ketan

3 years ago

10.2k
Color changing button
changes the color of a button automatically and continuously

Author:
Anonymous

2 years ago

8.6k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

1 year ago

893
Settings Button

Author:
Arya

3 years ago

10.8k
Exapnd and collapse button for large content without javascript
Truncate and expand on click large content without using JavaScript.

Author:
Komal Jain

1 year ago

2.3k
Elevated Buton
On hover merge shadow

Author:
Anonymous

1 year ago

2.6k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

11 months ago

1.1k
Sign in with boogle button

Author:
Conan Hilton

3 years ago

10.6k
Tailwind Different Button Styles
Fully Responsive Buttons

Author:
AKASH GANDHAR

1 year ago

2.5k
Background Gradient Button with Hover Effects
The button designed with a gradient background that transitions smoothly between three colors

Author:
Kavita Joshi

2 years ago

8.2k
Continue with Discord button
Login with the Discord button for social login

Author:
Anonymous

2 years ago

13k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components