Published on

Learn How To Build A Button With Tailwind CSS from the Pros

Button

Are you tired of writing custom CSS for every button on your website? Do you want to learn how to create beautiful, responsive buttons with ease? Look no further than Tailwind CSS. In this article, we'll show you how to build a button with Tailwind CSS, step-by-step.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to quickly and easily create custom designs without writing any CSS. It provides a set of pre-defined classes that you can use to style your HTML elements. With Tailwind CSS, you can create responsive designs, customize colors, fonts, and more.

The description of Button ui component

A button is a common UI component used on websites and applications. It allows users to interact with the website by clicking on it. Buttons can be used for various purposes, such as submitting a form, navigating to a new page, or triggering an action.

Why use Tailwind CSS to create a Button ui component?

Tailwind CSS makes it easy to create buttons with just a few lines of code. You don't have to worry about writing custom CSS for every button on your website. Tailwind CSS provides pre-defined classes that you can use to style your buttons. This saves you time and makes your code more maintainable.

The preview of Button ui component

Creating a button with Tailwind CSS is easy. We can use the bg-blue-500 class to set the background color of the button to blue. We can use the text-white class to set the color of the text to white. We can also use the py-2 and px-4 classes to set the padding of the button.

Free download of the Button's source code

The source code of Button ui component

To create a button with Tailwind CSS, we need to add the btn class to our HTML button element. We can then add the pre-defined classes to style our button.

<!-- component -->
<!-- Classic Button -->
<div class="flex flex-col">
    <div class="bg-white">
        <div class="flex flex-col text-center w-full mt-20">
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Example</h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Tailwind includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
        </div>
        <div class="flex justify-center py-8">
            <a href="" class="bg-blue-500 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-green-500 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-green-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-red-600 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-red-700 mr-6">
                Click here
            </a>
            <a href="" class="bg-gray-500 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-gray-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-gray-800 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-black mr-6">
                Click here
            </a>
            <a href="" class="bg-blue-400 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-500 mr-6">
                Click here
            </a>
            <a href="" class="bg-yellow-500 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-yellow-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-indigo-500 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-indigo-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-purple-500 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-purple-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-pink-500 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-pink-600 mr-6">
                Click here
            </a>
        </div>
        <div class="flex justify-center py-8">
            <a href="" class="bg-blue-500 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-green-500 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-green-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-red-600 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-red-700 mr-6">
                Click here
            </a>
            <a href="" class="bg-gray-500 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-gray-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-gray-800 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-black mr-6">
                Click here
            </a>
            <a href="" class="bg-blue-400 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-500 mr-6">
                Click here
            </a>
            <a href="" class="bg-yellow-500 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-yellow-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-indigo-500 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-indigo-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-purple-500 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-purple-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-pink-500 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-pink-600 mr-6">
                Click here
            </a>
        </div>
        <div class="flex justify-center py-8">
            <a href="" class="bg-blue-500 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-green-500 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-green-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-red-600 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-red-700 mr-6">
                Click here
            </a>
            <a href="" class="bg-gray-500 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-gray-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-gray-800 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-black mr-6">
                Click here
            </a>
            <a href="" class="bg-blue-400 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-500 mr-6">
                Click here
            </a>
            <a href="" class="bg-yellow-500 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-yellow-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-indigo-500 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-indigo-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-purple-500 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-purple-600 mr-6">
                Click here
            </a>
            <a href="" class="bg-pink-500 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-pink-600 mr-6">
                Click here
            </a>
        </div>
    </div>
    <div class="bg-white">
        <div class="flex flex-col text-center w-full mt-20">
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Outline buttons</h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Tailwind includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
        </div>
        <div class="mt-4 flex justify-center py-8">
            <a href="" class="border-2 border-blue-500 font-bold text-blue-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 border-green-500 font-bold text-green-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-green-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 border-red-600 font-bold text-red-600 px-4 py-3 transition duration-300 ease-in-out hover:bg-red-600 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 border-gray-500 font-bold text-gray-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-gray-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 border-black font-bold text-black px-4 py-3 transition duration-300 ease-in-out hover:bg-black hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 border-blue-400 font-bold text-blue-400 px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-400 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 border-yellow-500 font-bold text-yellow-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-yellow-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 border-indigo-500 font-bold text-indigo-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-indigo-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 border-purple-500 font-bold text-purple-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-purple-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 border-pink-500 font-bold text-pink-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-pink-500 hover:text-white mr-6">
                Click here
            </a>
        </div>
        <div class="mt-4 flex justify-center py-8">
            <a href="" class="border-2 rounded-lg border-blue-500 font-bold text-blue-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-lg border-green-500 font-bold text-green-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-green-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-lg border-red-600 font-bold text-red-600 px-4 py-3 transition duration-300 ease-in-out hover:bg-red-600 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-lg border-gray-500 font-bold text-gray-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-gray-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-lg border-black font-bold text-black px-4 py-3 transition duration-300 ease-in-out hover:bg-black hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-lg border-blue-400 font-bold text-blue-400 px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-400 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-lg border-yellow-500 font-bold text-yellow-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-yellow-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-lg border-indigo-500 font-bold text-indigo-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-indigo-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-lg border-purple-500 font-bold text-purple-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-purple-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-lg border-pink-500 font-bold text-pink-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-pink-500 hover:text-white mr-6">
                Click here
            </a>
        </div>
        <div class="mt-4 flex justify-center py-8">
            <a href="" class="border-2 rounded-full border-blue-500 font-bold text-blue-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-full border-green-500 font-bold text-green-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-green-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-full border-red-600 font-bold text-red-600 px-4 py-3 transition duration-300 ease-in-out hover:bg-red-600 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-full border-gray-500 font-bold text-gray-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-gray-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-full border-black font-bold text-black px-4 py-3 transition duration-300 ease-in-out hover:bg-black hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-full border-blue-400 font-bold text-blue-400 px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-400 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-full border-yellow-500 font-bold text-yellow-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-yellow-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-full border-indigo-500 font-bold text-indigo-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-indigo-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-full border-purple-500 font-bold text-purple-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-purple-500 hover:text-white mr-6">
                Click here
            </a>
            <a href="" class="border-2 rounded-full border-pink-500 font-bold text-pink-500 px-4 py-3 transition duration-300 ease-in-out hover:bg-pink-500 hover:text-white mr-6">
                Click here
            </a>
        </div>
    </div>
    <div class="bg-white">
        <div class="flex flex-col text-center w-full my-20">
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Button Icon</h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Tailwind includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
        </div>
        <div class="mt-4 flex justify-center">
            <a href="" class="flex bg-blue-500 font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-600 mr-6">
                Click here
                <svg xmlns="http://www.w3.org/2000/svg" class="inline ml-2 w-6 stroke-current text-white stroke-2" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
            <a href="" class="flex bg-blue-500 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-600 mr-6">
                Click here
                <svg xmlns="http://www.w3.org/2000/svg" class="inline ml-2 w-6 stroke-current text-white stroke-2" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
            <a href="" class="flex bg-blue-500 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-600 mr-6">
                Click here
                <svg xmlns="http://www.w3.org/2000/svg" class="inline ml-2 w-6 stroke-current text-white stroke-2" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
        </div>
        <div class="mt-16 flex justify-center">
            <a href="" class="flex bg-blue-500 font-bold text-white px-4 py-4 transition duration-300 ease-in-out hover:bg-blue-600 mr-6">
                <svg xmlns="http://www.w3.org/2000/svg" class="inline w-6 stroke-current text-white stroke-2" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
            <a href="" class="flex bg-blue-500 rounded-lg font-bold text-white text-center px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-600 mr-6">
                <svg xmlns="http://www.w3.org/2000/svg" class="inline w-6 stroke-current text-white stroke-2" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
            <a href="" class="flex bg-blue-500 rounded-full font-bold text-white px-4 py-4 transition duration-300 ease-in-out hover:bg-blue-600 mr-6">
                <svg xmlns="http://www.w3.org/2000/svg" class="inline w-6 stroke-current text-white stroke-2" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
        </div>
    </div>
    <div class="bg-white">
        <div class="flex flex-col text-center w-full mt-16">
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Button Other Color</h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Tailwind includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
        </div>
        <div class="mt-4 flex justify-center mb-20">
            <button
                type="button"
                class="border border-indigo-500 bg-indigo-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-indigo-600 focus:outline-none focus:shadow-outline"
            >
                Primary
            </button>
            <button
                type="button"
                class="border border-green-500 bg-green-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-green-600 focus:outline-none focus:shadow-outline"
            >
                Success
            </button>
            <button
                type="button"
                class="border border-red-500 bg-red-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-red-600 focus:outline-none focus:shadow-outline"
            >
                Error
            </button>
            <button
                type="button"
                class="border border-yellow-500 bg-yellow-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-yellow-600 focus:outline-none focus:shadow-outline"
            >
                Warning
            </button>
            <button
                type="button"
                class="border border-pink-500 bg-pink-500 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-pink-600 focus:outline-none focus:shadow-outline"
            >
                Info
            </button>
            <button
                type="button"
                class="border border-gray-700 bg-gray-700 text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-gray-800 focus:outline-none focus:shadow-outline"
            >
                Dark
            </button>
            <button
                type="button"
                class="border border-gray-200 bg-gray-200 text-gray-700 rounded-md px-4 py-2 m-2 transition duration-500 ease select-none hover:bg-gray-300 focus:outline-none focus:shadow-outline"
            >
                Light
            </button>
        </div>
    </div>
</div>

How to create a Button with Tailwind CSS?

Let's get started by creating a basic button with Tailwind CSS.

Step 1: Set up your project

To use Tailwind CSS, you need to install it in your project. You can do this using npm or yarn. Once you've installed Tailwind CSS, you need to create a CSS file and import Tailwind CSS.

Step 2: Create a basic button

To create a basic button, we can use the bg-blue-500 class to set the background color of the button to blue. We can use the text-white class to set the color of the text to white. We can also use the py-2 and px-4 classes to set the padding of the button.

<button class="btn bg-blue-500 text-white py-2 px-4">Click me</button>

Step 3: Customize your button

Tailwind CSS provides a set of pre-defined classes that you can use to customize your button. For example, you can use the hover:bg-blue-700 class to change the background color of the button when the user hovers over it.

<button class="btn bg-blue-500 hover:bg-blue-700 text-white py-2 px-4">Click me</button>

You can also use the rounded class to round the corners of the button.

<button class="btn bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">Click me</button>

Step 4: Create different types of buttons

Tailwind CSS provides pre-defined classes for different types of buttons. For example, you can use the btn-primary class to create a primary button.

<button class="btn btn-primary py-2 px-4">Click me</button>

You can also use the btn-secondary class to create a secondary button.

<button class="btn btn-secondary py-2 px-4">Click me</button>

Step 5: Create responsive buttons

Tailwind CSS provides pre-defined classes for creating responsive designs. For example, you can use the sm class to create a button that is only visible on small screens.

<button class="btn btn-primary py-2 px-4 sm:hidden">Click me</button>

Conclusion

In this article, we've shown you how to create a button with Tailwind CSS. We've covered the basics of Tailwind CSS, the description of the button UI component, why you should use Tailwind CSS to create a button, and how to create a button with Tailwind CSS. With Tailwind CSS, you can create beautiful, responsive buttons with ease. Give it a try and see how it can improve your workflow.