Buttons variations

This tailwind example is contributed by R.P Ketan, on 24-Feb-2023. Component is made with Tailwind v3.4. It is responsive.

Button

Author R.P Ketan

Tailwind v3.4 10.4k 8

Fork Fullscreen

<div class="flex flex-col gap-4">
    <p class="font-bold">Rounded Buttons:</p>

<div class="flex space-x-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Button 1
        </button>
        <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
            Button 2
        </button>
        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
            Button 3
        </button>
    </div>

<p class="font-bold">Outline Buttons</p>
    <div class="flex space-x-4">

<button class="border border-blue-500 text-blue-500 font-bold py-2 px-4 rounded">
            Button
        </button>

<button class="border border-red-500 text-red-500 font-bold py-2 px-4 rounded">
            Button
        </button>

<button class="border border-green-500 text-green-500 font-bold py-2 px-4 rounded">
            Button
        </button>
    </div>

<p class="font-bold">Gradient Buttons:</p>
    <div class="flex space-x-4">

<button class="bg-gradient-to-r from-red-400 to-yellow-500 text-white font-bold py-2 px-4 rounded">
            Button
        </button>

<button class="bg-gradient-to-r from-blue-400 to-indigo-500 text-white font-bold py-2 px-4 rounded">
            Button
        </button>

<button class="bg-gradient-to-r from-green-400 to-blue-500 text-white font-bold py-2 px-4 rounded">
            Button
        </button>
    </div>
</div>