Tailwind Zero to Design: Buttons

Anyone can design something that looks good. It just takes some attention to the right details. With design, details matter, but how do you know which details matter most? The answer is that it just takes a little practice and observation. In this article, I'll show you how to take an unstyled button element and (through iteration and designing in the browser) make it great. We'll take it step-by-step and show you some of the details you should sweat.

Bust out your developer's paintbrush, and let's jump in!

The Basic Button

First, we have a simple button element. With a typical Tailwind build, it will look like the below example. As in... it won't look like anything at all (due to the CSS reset). Leaves a lot to be desired, eh?

1<button>Design</button>
1<button>Design</button>

Our first goal is to make this look like a typical button you might see. We'll do it a step at a time. The first step is to add some background color.

1<button class="bg-blue-700">Design</button>
1<button class="bg-blue-700">Design</button>

Still looks terrible, but it's something. Anyone could've done that. Now let's add some contrast by using a lighter text color.

1<button class="text-white bg-blue-700">Design</button>
1<button class="text-white bg-blue-700">Design</button>

Next, add some padding to give the text inside some breathing room. Spacing (margin and padding) is crucial to designs of every type. This is one detail you should always pay attention to. For example, say we added the same amount of padding to all sides of the button with p-4:

1<button class="p-4 text-white bg-blue-700">Design<button>
1<button class="p-4 text-white bg-blue-700">Design<button>

That looks okay, but it might look even better if we reduced the vertical spacing a bit. Let's try that. Ahh, looks much more "button-like."

1<button class="px-4 py-2 text-white bg-blue-700">Design</button>
1<button class="px-4 py-2 text-white bg-blue-700">Design</button>

Okay, let's move on to the next detail — rounding (aka border-radius). Not every button needs to be rounded. It depends on the look you're going for. Rounded corners look more casual and playful, while square corners look more formal and assertive.

1<button class="rounded px-4 py-2 text-white bg-blue-700">Design</button>
1<button class="rounded px-4 py-2 text-white bg-blue-700">Design</button>

Pro tip: use the rounded-sm class for more business-y buttons. It's almost a square corner, but not quite as stark.

Bringing it to Life

We now have a basic button, but it doesn't do anything. Let's make a few more iterations and bring it to life! First, we need a hover state. You'll often see this as a darker (or lighter) background color.

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

Think of the real world. When you lift an object, it casts a shadow. Give it a shot for our button. The shadow is subtle, but it gives it a little something extra. Details matter, remember?

1<button class="hover:shadow-lg hover:bg-blue-500 rounded px-4 py-2 text-white bg-blue-700">Design</button>
1<button class="hover:shadow-lg hover:bg-blue-500 rounded px-4 py-2 text-white bg-blue-700">Design</button>

That's a good start, but it still looks pretty plain. Let's add a transition to give it a bit more life. See how the change in hover state is much smoother?

1<button class="transition duration-500 hover:shadow-lg hover:bg-blue-500 rounded px-4 py-2 text-white bg-blue-700">Design</button>
1<button class="transition duration-500 hover:shadow-lg hover:bg-blue-500 rounded px-4 py-2 text-white bg-blue-700">Design</button>

Keep in mind that transition durations much longer than this can cause your UI to feel slow to the user. Use long transitions sparingly.

There's one more thing we can add — giving the button a tiny bit of movement. This will help give the impression that it's lifting off of the page. You might want some buttons to feel more "pressed down," though. Skip this for those, or try applying the movement in reverse... it's your world, paint it how you want to!

1<button class="transform hover:-translate-y-px transition duration-500 hover:shadow-lg hover:bg-blue-500 rounded px-4 py-2 text-white bg-blue-700">Design</button>
1<button class="transform hover:-translate-y-px transition duration-500 hover:shadow-lg hover:bg-blue-500 rounded px-4 py-2 text-white bg-blue-700">Design</button>

All the transform hover:-translate-y-px classes do is to move the button one pixel upwards on hover. It's subtle, but subtle is often the difference between a good design and a great one. Experiment from this point and see what sort of button variations you can come up with.

Experiment with the final result on Tailwind Play

Finding Other Inspiration

There's nothing wrong with getting inspiration from other designers. In fact, it's one of the best ways to get better at thinking about the details. Pick a design element you like and analyze it. Break it down into smaller parts.

Search for "buttons" on Dribbble and try for yourself!

What sort of spacing does it have? What colors are used? What kind of font weight makes it feel good? Does it include an icon? Is the icon colored the same as the text? When you hover on it, how does it react?

With a bit of practice thinking like this, you'll be iterating like a pro designer sooner than you think.