Home
Maxim
Buttons

Buttons

This tailwind example is contributed by Maxim, on 02-Jan-2025. Component is made with Tailwind CSS v3. It is responsive.

Button

Author Maxim

1.7k

Fork Fullscreen

<div class="grid grid-cols-1 md:grid-cols-5 gap-6">
                
                <button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition duration-300">
                    Primary Action
                </button>

<button class="bg-gradient-to-r from-pink-500 to-purple-600 text-white px-6 py-3 rounded-xl hover:opacity-90 transition duration-300">
                    Get Started
                </button>

<button class="border-2 border-green-500 text-green-600 px-6 py-3 rounded-lg hover:bg-green-500 hover:text-white transition duration-300">
                    Learn More
                </button>

<button class="bg-gray-900 text-white px-6 py-3 rounded-lg flex items-center justify-center space-x-2 hover:bg-gray-800 transition duration-300">
                    <i class="fas fa-moon mr-2"></i>
                    Dark Mode
                </button>

<button class="bg-red-500 text-white px-6 py-3 rounded-lg relative hover:bg-red-600 transition duration-300">
                    <span class="absolute -top-2 -right-2 bg-yellow-400 text-gray-900 text-xs rounded-full w-5 h-5 flex items-center justify-center">5</span>
                    Notifications
                </button>

<button class="bg-white text-gray-800 border border-gray-300 px-6 py-3 rounded-lg hover:bg-gray-100 transition duration-300 shadow-md">
                    View Details
                </button>

<button class="bg-orange-500 text-white px-6 py-3 rounded-xl hover:bg-orange-600 transition duration-300 transform hover:scale-105">
                    Take Action
                </button>

<button class="bg-purple-500 text-white px-6 py-3 rounded-lg hover:bg-purple-600 transition duration-300 shadow-lg">
                    Explore Options
                </button>

<button class="bg-gradient-to-r from-teal-400 to-blue-500 text-white px-6 py-3 rounded-lg hover:opacity-90 transition duration-300">
                    Connect Now
                </button>

<button class="border-2 border-red-500 text-red-600 px-6 py-3 rounded-lg hover:bg-red-500 hover:text-white transition duration-300">
                    Cancel Subscription
                </button>

<button class="bg-indigo-600 text-white px-6 py-3 rounded-lg flex items-center justify-center space-x-2 hover:bg-indigo-700 transition duration-300">
                    <i class="fas fa-rocket mr-2"></i>
                    Launch Project
                </button>

<button class="bg-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-300 transition duration-300">
                    Secondary Action
                </button>

<button class="bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 transition duration-300">
                    Confirm
                </button>

<button class="bg-red-500 text-white px-6 py-3 rounded-lg hover:bg-red-600 transition duration-300">
                    Delete
                </button>

<button class="bg-blue-400 text-white px-6 py-3 rounded-xl hover:bg-blue-500 transition duration-300">
                    Update
                </button>

<button class="bg-gradient-to-r from-yellow-500 to-orange-600 text-white px-6 py-3 rounded-lg hover:opacity-90 transition duration-300">
                    Continue
                </button>

<button class="bg-green-500 text-white px-6 py-3 rounded-lg flex items-center justify-center space-x-2 hover:bg-green-600 transition duration-300">
                    Submit
                    <i class="fas fa-arrow-right ml-2"></i>
                </button>

<button class="text-gray-900 hover:bg-gray-100 px-6 py-3 rounded-lg transition duration-300">
                    Simple Link
                </button>

<button class="bg-indigo-500 text-white px-6 py-3 rounded-lg relative overflow-hidden group">
                    <span class="absolute inset-0 bg-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity"></span>
                    <span class="relative z-10">Hover Me</span>
                </button>

<button class="bg-white text-gray-800 px-6 py-3 rounded-xl shadow-md hover:shadow-lg transition duration-300">
                    Soft Button
                </button>

<button class="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 text-gray-800 px-6 py-3 rounded-xl hover:bg-opacity-40 transition duration-300">
                    Glassmorphism
                </button>

<button class="bg-purple-600 text-white px-6 py-3 rounded-lg animate-pulse hover:animate-none shadow-lg hover:shadow-purple-500/50 transition duration-300">
                    Neon Button
                </button>

<button class="bg-teal-500 text-white px-6 py-3 rounded-lg hover:skew-x-6 transition duration-300">
                    Skew Hover
                </button>

<button class="border-4 border-transparent bg-gradient-to-r from-pink-500 to-purple-500 text-white px-6 py-3 rounded-lg bg-clip-padding hover:from-pink-600 hover:to-purple-600">
                    Gradient Border
                </button>

<button class="bg-gradient-to-br from-blue-400 to-purple-500 text-white px-6 py-3 rounded-xl hover:opacity-90 transition duration-300">
                    Soft Gradient
                </button>

<button class="relative px-6 py-3 rounded-lg overflow-hidden group bg-white border-2 border-indigo-500 text-indigo-500 hover:text-white">
                    <span class="absolute inset-0 bg-indigo-500 transform -translate-x-full group-hover:translate-x-0 transition duration-300"></span>
                    <span class="relative z-10 group-hover:text-white">
                        Animated Border
                    </span>
                </button>

<button class="bg-blue-600 text-white px-6 py-3 rounded-lg flex items-center justify-center space-x-2 hover:bg-blue-700 transition duration-300">
                    <i class="fab fa-facebook mr-2"></i>
                    Facebook
                </button>

<button class="bg-green-500 text-white px-6 py-3 rounded-lg animate-pulse hover:animate-none transition duration-300">
                    Pulsating Button
                </button>

<button class="border-2 border-transparent bg-gradient-to-r from-green-400 to-blue-500 text-white px-6 py-3 rounded-lg bg-clip-padding hover:from-green-500 hover:to-blue-600">
                    Outline Gradient
                </button>

<button class="bg-orange-500 text-white px-6 py-3 rounded-xl hover:bg-orange-600 transition duration-300 shadow-md">
                    Soft Rounded
                </button>

<button class="bg-indigo-600 text-white px-6 py-3 rounded-lg transform transition duration-300 hover:-translate-y-1 hover:shadow-lg">
                    3D Hover Effect
                </button>

<button class="border border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-100 transition duration-300">
                    Minimal Outline
                </button>

<button class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white px-6 py-3 rounded-lg hover:opacity-90 transition duration-300">
                    Vibrant Gradient
                </button>

<button class="bg-purple-500 text-white px-6 py-3 rounded-lg flex items-center justify-center hover:bg-purple-600 transition duration-300">
                    <i class="fas fa-power-off mr-2"></i>
                    Toggle
                </button>

<button class="border border-blue-500 text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-500 hover:text-white transition duration-300 shadow-sm">
                    Soft Shadow
                </button>

<button class="bg-black text-green-400 px-6 py-3 rounded-sm border-2 border-green-400 hover:bg-green-400 hover:text-black transition duration-300 font-mono">
                    Cyberpunk
                </button>

<button class="border-2 border-transparent bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-full bg-clip-padding hover:from-purple-600 hover:to-pink-600 transition duration-300">
                    Gradient Outline
                </button>

<button class="bg-white text-gray-800 px-6 py-3 rounded-lg border border-gray-200 hover:bg-gray-100 transition duration-300 shadow-sm">
                    Minimalist
                </button>

<button class="bg-red-500 text-white px-6 py-3 rounded-none hover:bg-red-600 transition duration-300 border-4 border-black font-pixel">
                    Pixel Style
                </button>

<button class="bg-blue-600 text-white px-6 py-3 rounded-xl relative overflow-hidden group">
                    <span class="absolute top-0 left-0 w-full h-full bg-white opacity-20 transform -skew-x-12 -translate-x-full group-hover:translate-x-0 transition duration-500"></span>
                    <span class="relative z-10">Liquid Hover</span>
                </button>

<button class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition duration-300 flex items-center justify-center space-x-2">
                    <i class="fas fa-leaf mr-2"></i>
                    Eco Action
                </button>

<button class="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 text-gray-900 px-6 py-3 rounded-xl hover:bg-opacity-40 transition duration-300">
                    Frosted Glass
                </button>

<button class="bg-gradient-to-br from-indigo-600 to-purple-600 text-white px-6 py-3 rounded-lg hover:from-indigo-700 hover:to-purple-700 transition duration-300">
                    Duotone
                </button>

<button class="relative border-2 border-gray-800 text-gray-800 px-6 py-3 rounded-lg overflow-hidden group">
                    <span class="absolute inset-0 bg-gray-800 transform -translate-x-full group-hover:translate-x-0 transition duration-300"></span>
                    <span class="relative z-10 group-hover:text-white">
                        Outline Shift
                    </span>
                </button>

<button class="bg-pink-300 text-white px-6 py-3 rounded-xl hover:bg-pink-400 transition duration-300 shadow-md">
                    Pastel Soft
                </button>

<button class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300 shadow-xl hover:shadow-blue-500/50">
                    Tech Glow
                </button>

<button class="border-2 border-transparent bg-gradient-to-r from-green-400 to-blue-500 text-white px-6 py-3 rounded-lg bg-clip-padding hover:from-green-500 hover:to-blue-600">
                    Gradient Line
                </button>

<button class="bg-gray-900 text-white px-6 py-3 rounded-lg hover:bg-gray-800 transition duration-300 border-2 border-gray-700">
                    Cosmic Dark
                </button>

<button class="bg-yellow-400 text-gray-900 px-6 py-3 rounded-full hover:bg-yellow-500 transition duration-300 transform hover:scale-105 shadow-lg">
                    Creative Touch
                </button>
            </div>

Related Examples

Dismissible Buttons

Author:
Manon Daniel

3 years ago

9.3k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

3 years ago

11.6k
Switch tabs button

Author:
gmer33

2 years ago

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

Author:
Livia Flores

2 years ago

25.7k
beautiful buttons set
a beautofull buttons set like primary, outline and text.

Author:
Akram Khan

1 year ago

1.6k
Join now button
Attractive button for the CTA section

Author:
Matej Kovač

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

10 months ago

1k
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

1 year ago

2k
Button Dropdown
Drop down button with only tailwind css using focus

Author:
Shivam Vishwakarma

1 year ago

2k
View More Button

Author:
Amit Pachange

3 years ago

19.6k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

9 months ago

1.3k
shadcn Button
button

Author:
Cristian

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components