Buttons

We already talked a bit about buttons in the previous lesson, now let's finally roll up our sleeves and create a decent button.

Creating a basic button

In our project, in the Call to action section, below the headings, add the following button code:

This will be the result:

In this example, we've applied several classes to the button:

  • bg-blue-500: This sets the button's background color to a specific shade of blue.
  • text-white: This sets the button's text color to white.
  • px-4 py-2: These are padding classes. px-4 applies horizontal padding and py-2 applies vertical padding.
  • rounded: This gives the button rounded corners.

Creating a button with hover effects

If you want to add hover effects to the button, such as changing the background color when the mouse pointer is over the button, you can use the hover: prefix.

Hover over the button to see it change color:

hover:bg-blue-700: changes the background color to a darker shade of blue when you hover over the button.

Creating a button with active state

You might also want to change the button's style when it's active, or being clicked. You can do this with the active: prefix.

Click and hold the button to see the effect:

Where is the end?

We could continue this process of improving the button for quite some time. It would be worth adding focus state, dark mode, shadow and a few other things.

As you can see, the list of classes grows mercilessly, and managing them becomes more and more problematic.

This is where the TW Elements library comes in handy, providing us with ready-made solutions combined into a coherent design system.

Let's take a look at what it has to offer.

TW Elements buttons

Basic example

Use these default button styles with multiple colors to indicate an action or link within your website.

Hierarchy

Buttons, as one of the key UI elements, must have their own hierarchy. This means that the user should be able to easily identify which button is the most important (primary button), which is less important (secondary button) and which presents completely additional information (tertiary button).

Elements with strong, filled backgrounds and shadows attract attention the most, which is why button primary is built in this way.

A delicate background without shadows is less engaging, so it is well suited for button secondary.

The lack of background and shadow makes the element the least visible. These features characterize the button tertiary.

Note: Button tertiary may require additional margins. Without extra margins, the button edge will be flush with adjacent elements (which is sometimes the desired result). If you need margin - simply add margin utility classes like mx-2.

Contextual

TW Elements includes several predefined button styles, each serving its own semantic purpose.

Neutral

Neutral buttons provide additional light and dark colors.

Outline

Use the following button styles to show the colors only for the border of the element.

Rounded

Use elements rounded corners with the .rounded-full property.

Floating

Use floating action button that represents the primary action in an application. It's button that appears in front of all screen content, typically as a circular shape with an icon in its center.

Note: This is only a small part of the available solutions. To see all the possibilities, read the button documentation page.

Step 1 - add button to the project

Uhh, that was a long lesson. However, I hope that now the buttons are not scary for you (despite the number of classes they require 😅).

Using the newly acquired knowledge, let's update the Call to action section in our project and add a button with an icon under the headings:

This is what it should look like after saving:

Remember that if something doesn't work as it should or is not clear to you, you can always hit me up on Twitter 😉

Note: You can also try our Button generator.

Demo and source code for this lesson
Prev Next
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.