Buttons examples

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

Tailwind v3.4 13.5k 17

<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

Samuel Dawson

3 years ago

17.1k
Buttons variations

R.P Ketan

3 years ago

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

Anonymous

3 years ago

9.1k
Button
Material Button

Akram Khan

2 years ago

3k
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Banshee

1 year ago

1.4k
Primary Button
Elegant button

Brandon D

4 years ago

12.5k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
Button

Lokesh H

2 months ago

271
Sign in with Google Login Button

Anonymous

1 year ago

2k
Motfx loading

Nyambat Byamba

2 years ago

3.2k
tooltip Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.3k
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Musawer Shah

1 year ago

883