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

<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

2 years ago

15.8k
Buttons variations

Author:
R.P Ketan

2 years ago

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

Author:
Anonymous

2 years ago

8.2k
button animation
button animation big

Author:
QQ-VVN

5 months ago

530
Canlı Yayın Butonu
Pulse efekt içeren canlı yayın butonu.

Author:
Sedat Kumcu

11 months ago

1.5k
Primary Button
Elegant button

Author:
Brandon D

3 years ago

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

Author:
Raul antonio de la cruz hernandez

2 months ago

191
Sign in with boogle button

Author:
Conan Hilton

3 years ago

10.3k
Thumbs up and thumbs down buttons
Upvote downvote buttons

Author:
Prajwal Hallale

2 years ago

11.8k
Neomorphism button

Author:
Akram Khan

1 year ago

2.1k
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Author:
Livia Flores

2 years ago

25k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Author:
Shakti

2 years ago

39.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components