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

933

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

Animated Search bar
Animated Search bar using tailwind

Author:
Muhamad Rufaid kv

1 month ago

154
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

3 months ago

465
Elevated Buton
On hover merge shadow

Author:
Anonymous

10 months ago

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

Author:
Shivam Vishwakarma

8 months ago

1.6k
Download on the Mac App Store dark button

Author:
Simon Scheffer

2 years ago

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

Author:
Anonymous

1 year ago

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

Author:
Anonymous

1 year ago

12.2k
3D button with hover effect!

Author:
Laurits

2 years ago

17.1k
Buttons with Icon

Author:
_Amar_

3 years ago

15.2k
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

38.8k
Button
Material Button

Author:
Akram Khan

10 months ago

849
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

2 months ago

378

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components