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

678

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

Custom Carosel

Author:
Md. Tofayel islam

6 months ago

1.7k
Get it on Google Play button dark

Author:
Simon Scheffer

2 years ago

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

Author:
Anonymous

11 months ago

2.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

4 months ago

1.1k
Button
Material Button

Author:
Akram Khan

7 months ago

1.1k
Back to top button

Author:
Rafferty Kim

2 years ago

13.9k
Button with hover to button shadow
A beautiful button with a special shadow

Author:
Zayed Hossain

6 months ago

963
Dismissible Buttons

Author:
Manon Daniel

2 years ago

8.7k
File Input
File Input

Author:
Aman kumar

9 months ago

2.1k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

1 month ago

188
Button
Button When Hover and page Reload then Button text will show the animation

Author:
Chitranshu

7 months ago

1.5k
App store & Google playstore buttons

Author:
Dika Rahman

1 year ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components