21 Tailwind Buttons

Modern, responsive Tailwind Buttons for sleek UI design
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors duration-200">
        Primary
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="border-2 border-blue-500 text-blue-500 px-6 py-2 rounded-lg hover:bg-blue-500 hover:text-white transition-colors duration-200">
        Outline
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-2 rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all duration-300">
        Gradient
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-red-500 text-white px-6 py-2 rounded-lg shadow-lg hover:shadow-xl hover:bg-red-600 transition-all duration-300">
        Shadow
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition-colors duration-200 flex items-center">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        Icon
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-indigo-500 text-white px-6 py-2 rounded-full hover:bg-indigo-600 transition-colors duration-200">
        Pill
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-yellow-500 text-white px-6 py-2 rounded-lg hover:bg-yellow-600 transition-all duration-300 transform hover:scale-105">
        Animated
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-400 min-h-screen flex items-center justify-center">
    <button class="bg-white/20 backdrop-blur-md text-white px-6 py-2 rounded-lg border border-white/10 hover:bg-white/30 transition-colors duration-200">
        Glass
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-blue-500 text-white px-6 py-2 rounded-lg shadow-lg hover:shadow-xl hover:bg-blue-600 active:translate-y-1 transition-all duration-200">
        3D Effect
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-purple-500 text-white px-6 py-2 rounded-lg hover:bg-purple-600 transition-colors duration-200 flex items-center justify-center">
        <svg class="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24">
            <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16z" fill="currentColor" />
            <path d="M12 4a8 8 0 018 8h-2a6 6 0 00-6-6V4z" fill="currentColor" />
        </svg>
        Loading...
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-gray-100 text-gray-700 px-8 py-3 rounded-lg shadow-[9px_9px_16px_rgba(163,177,198,0.6),-9px_-9px_16px_rgba(255,255,255,0.5)] hover:shadow-[inset_6px_6px_10px_rgba(163,177,198,0.6),inset_-6px_-6px_10px_rgba(255,255,255,0.5)] transition-all duration-300">
        Neumorphic
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-white text-gray-700 px-8 py-3 rounded-lg border-2 border-transparent bg-clip-padding hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:text-white transition-all duration-300">
        Gradient
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="relative text-gray-700 px-8 py-3 text-lg font-semibold after:absolute after:left-1/2 after:-bottom-1 after:h-0.5 after:w-0 after:bg-blue-500 after:transition-all after:duration-300 after:transform after:-translate-x-1/2 hover:after:w-full">
        Hover Underline
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-blue-500 text-white px-8 py-3 rounded-lg shadow-[0_0_10px_#3B82F6,0_0_20px_#3B82F6] hover:shadow-[0_0_20px_#3B82F6,0_0_40px_#3B82F6] transition-all duration-300">
        Glow Hover
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="bg-blue-500 text-white px-8 py-3 rounded-lg shadow-[0_5px_0_#1D4ED8] active:translate-y-1 active:shadow-[0_2px_0_#1D4ED8] transition-all duration-100">
        3D Press
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="relative bg-cyan-800 text-white px-8 py-3 rounded-lg overflow-hidden before:absolute before:top-1/2 before:left-1/2 before:w-[300%] before:h-[300%] before:bg-white/30 before:transition-all before:duration-500 before:transform before:-translate-x-1/2 before:-translate-y-1/2 before:rotate-45 hover:before:w-0 hover:before:h-0">
        Liquid Fill
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <button class="relative bg-red-500 text-white px-8 py-3  overflow-hidden before:absolute before:top-1/2 before:left-1/2 before:w-2.5 before:h-2.5 before:bg-white/50 before:rounded-full before:opacity-0 before:transition-all before:duration-500 before:transform before:-translate-x-1/2 before:-translate-y-1/2 hover:before:w-[200px] hover:before:h-[200px] hover:before:opacity-100">
        Particle Effect
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-gradient-to-r from-purple-500 to-pink-500 min-h-screen flex items-center justify-center">
    <button class="bg-white/20 backdrop-blur-md text-white px-8 py-3 rounded-lg border border-white/10 hover:bg-white/30 transition-all duration-300">
        Glassmorphism
    </button>
</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-whitesmoke min-h-screen flex items-center justify-center">
    <button class="relative w-48 h-14 bg-white/10 backdrop-blur-md text-gray text-xl font-semibold rounded-2xl border border-white/20 shadow-lg transition-all duration-500 hover:shadow-xl hover:shadow-cyan-500/50">
        <span class="absolute left-4 top-1/2 -translate-y-1/2 opacity-50 group-hover:opacity-100 transition-opacity duration-500">šŸ”¹</span>
        Click Me
    </button>


</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-whitesmoke min-h-screen flex items-center justify-center">
    <button class="relative w-48 h-14 rounded-2xl bg-gray-800 text-white font-semibold text-xl overflow-hidden group flex items-center justify-center gap-2 transition-all duration-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/50">
        <span class="group-hover:-translate-x-2 transition-transform duration-500">
            <i class="fas fa-bolt text-lg"></i>
        </span>
        Click Here
    </button>




</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!
Document

Edit & Get Code

<script src="https://cdn.tailwindcss.com"></script>
<style>
    .elastic-btn {
        transition: transform 0.2s ease-out;
    }

    .elastic-btn:active {
        transform: scaleX(1.2) scaleY(0.9);
    }
</style>
</head>

<body class="flex items-center justify-center min-h-screen bg-gray-900">

    <button class="elastic-btn px-8 py-4 text-lg font-bold text-white bg-blue-500 rounded-full shadow-lg hover:bg-blue-600 active:bg-blue-700">
        Click Me, I am Elastic
    </button>

</body>
HTML Code Copied!
< !-- No CSS code needed for this element -->
CSS Code Copied!
<!-- No JS code needed for this element -->
JS Code Copied!