Buttons

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

Tailwind v3.4 2.3k 9

<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

button

Raul antonio de la cruz hernandez

11 months ago

1k
Button With Loader
Tailwind Loader

Md. Tofayel islam

2 years ago

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

Coastal UI

2 years ago

2.6k
Listen on Spotify/Apple Music Button

Patricio Garcia

2 years ago

3.3k
button

Lokesh H

2 months ago

114
Upload button

Simon Scheffer

3 years ago

10.9k
gradient button

Akram Khan

2 years ago

2.8k
Continue with Discord button
Login with the Discord button for social login

Anonymous

2 years ago

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

Ingrid Schulz

3 years ago

11.8k
Google style Button

JUGENDRA GANGWAR

2 weeks ago

44
Button
Button with scale animation on hover and translate-y on active

Nabile BABABODI

10 months ago

257
Download on the App Store light button

Simon Scheffer

3 years ago

13.8k