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.

11.9k

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

Author:
R.P Ketan

2 years ago

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

Author:
Anonymous

1 year ago

7.7k
Floating feedback button

Author:
Livia Flores

2 years ago

12.1k
Elevated Buton
On hover merge shadow

Author:
Anonymous

9 months ago

1.6k
Gold Premium Button
🪙 Glowing Premium BIP Gold Button in pue Tailwind CSS

Author:
Arnav K

1 year ago

5.1k
Simple Btn

Author:
Abid Ullah

10 months ago

1.3k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
sachin senal

5 months ago

770
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

6 months ago

1.7k
Simple Btn animation

Author:
Ranit Saha

5 months ago

1.1k
Elegant Buttons
Useful Tailwind classes for creating several types of basic buttons.

Author:
Nick Girga

2 months ago

215
3D button with hover effect!

Author:
Laurits

2 years ago

17k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components