Published on

How To Make A Button (inset) With Tailwind CSS In 5 Easy Steps

Tags
Buttons
Button (inset)

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to rapidly build custom user interfaces. It provides a set of pre-defined CSS classes that can be used to style HTML elements. Tailwind CSS is a popular choice among developers because it allows them to create complex designs with minimal effort.

The description of Button (inset) ui component

A button is a user interface component that is used to trigger an action. The inset button is a variation of the standard button that appears to be pressed into the page. This effect is achieved by using a combination of box-shadow and background-color properties.

Why use Tailwind CSS to create a Button (inset) ui component?

Tailwind CSS provides a set of pre-defined classes that can be used to create complex user interfaces with minimal effort. The classes are designed to be composable, which means that they can be combined to create custom styles. This makes it easy to create a button (inset) ui component using Tailwind CSS.

The preview of Button (inset) ui component.

To create an inset button using Tailwind CSS, we will use the following classes:

  • bg-gray-300: sets the background color of the button to gray.
  • text-gray-700: sets the text color of the button to gray.
  • px-4: sets the horizontal padding of the button to 4.
  • py-2: sets the vertical padding of the button to 2.
  • rounded-md: rounds the corners of the button.
  • shadow-md: adds a shadow to the button to create the inset effect.

Free download of the Button (inset)'s source code

The source code of Button (inset) ui component.

To create an inset button using Tailwind CSS, we can use the following HTML code:

<button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md shadow-md">Button</button>

The above code will create a button with a gray background, gray text, rounded corners, and an inset effect.

<style>
.btn-inset::before {
    border: solid 1px #fff;
    position: absolute;
    top: .14286rem;
    right: .14286rem;
    bottom: .14286rem;
    left: .14286rem;
    content: "";
    border-radius: 1px;
}
</style>

<button class="bg-blue-700 hover:bg-blue-600 px-5 py-3 rounded text-white relative btn-inset">
    Button
</button>

How to create a Button (inset) with Tailwind CSS?

Now that we have a basic understanding of Tailwind CSS and the classes required to create an inset button, let's create one in 5 easy steps.

Step 1: Create a new HTML file

Create a new HTML file and add the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Inset Button</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
  </head>
  <body>
    <button class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md shadow-md">Button</button>
  </body>
</html>

This code includes the Tailwind CSS stylesheet and creates a button with the classes required to create an inset effect.

Step 2: Customize the button

To customize the button, we can modify the existing classes or add new ones. For example, we can change the background color of the button to blue by adding the bg-blue-500 class:

<button class="bg-blue-500 text-gray-700 px-4 py-2 rounded-md shadow-md">Button</button>

Step 3: Add hover and active states

To add hover and active states to the button, we can use the hover and active variants provided by Tailwind CSS. For example, we can change the background color of the button to blue on hover by adding the hover:bg-blue-600 class:

<button class="bg-blue-500 hover:bg-blue-600 text-gray-700 px-4 py-2 rounded-md shadow-md">Button</button>

Similarly, we can change the background color of the button to a darker shade of blue on active by adding the active:bg-blue-700 class:

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-gray-700 px-4 py-2 rounded-md shadow-md">Button</button>

Step 4: Add disabled state

To add a disabled state to the button, we can use the disabled attribute and the opacity-50 class provided by Tailwind CSS. For example, we can disable the button and reduce its opacity by adding the disabled opacity-50 classes:

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-gray-700 px-4 py-2 rounded-md shadow-md disabled opacity-50">Button</button>

Step 5: Add click event

To add a click event to the button, we can use JavaScript. For example, we can add an alert box that displays a message when the button is clicked:

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-gray-700 px-4 py-2 rounded-md shadow-md" onclick="alert('Button clicked!')">Button</button>

Conclusion

In this article, we learned how to create a button (inset) ui component using Tailwind CSS in 5 easy steps. We also learned about the benefits of using Tailwind CSS and how it can help us create complex user interfaces with minimal effort. With Tailwind CSS, creating custom user interfaces has never been easier!