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

<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.2k
Buttons variations

Author:
R.P Ketan

2 years ago

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

Author:
Anonymous

2 years ago

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

Author:
KULDEEP

7 months ago

410
Github star button

Author:
Simon Scheffer

3 years ago

11k
Download on the App Store dark button

Author:
Simon Scheffer

2 years ago

8.7k
Background gradient changing button
Automatic and continuously gradient-changing button. Cyclic color changing button.

Author:
Ingrid Schulz

2 years ago

11.2k
SCROLL ABAJO
para poner que a llegado al final de la pagina

Author:
Raul antonio de la cruz hernandez

6 months ago

820
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.

Author:
SHARIFUL ISLAM

1 year ago

1.5k
View More Button

Author:
Amit Pachange

3 years ago

19.4k
Button with Bouncing Animation

Author:
Prashant

3 years ago

14.5k
Glowing gradient button
Button on black background

Author:
Özgür Atmaca

8 months ago

590

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components