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

Buy Me a Coffee CTA section

Sienna

3 years ago

10.5k
Button Group

Prem..

4 years ago

10.5k
scroll to top buton with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.7k
Dismissible Buttons

Manon Daniel

4 years ago

9.7k
Floating pus button

Jaffar Hussain

2 years ago

2.3k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

KULDEEP

1 year ago

1.4k
Previous Next Buttons
Pagination buttons

Alok

4 years ago

15.4k
Border bottom button

Santos78

3 years ago

13.1k
Back to top button

Rafferty Kim

3 years ago

15.8k
Glowing gradient button
Button on black background

Leon Bachmann

3 years ago

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

Anonymous

3 years ago

13.7k
Button group
nice and simple buttons with a hover effect

Sophia Baker

3 years ago

8.6k