Create a 3D Button with Tailwind CSS
Create a 3D Button with Tailwind CSS
Tailwind CSS

Create a 3D Button with Tailwind CSS

Lynne Buencamino's Profile
Lynne Buencaminoon Jun 30, 2021

Use Tailwind CSS to create a 3D button. We can hover the button and see the 3D effect.

Buttons create a compelling way for users to take an action. Buttons guide your audience and shares in the overall experience. The look and feel of a button can help your viewers get excited.

Creating buttons with Tailwind CSS is a breeze. We'll learn how to create button and a shadow that transitions on hover. It's simple, yet fun!

We'll build a Tailwind CSS 3D Button that depresses when you hover (try hovering it 👇).

<div class="min-h-screen flex items-center justify-center bg-blue-600">
   <button class="relative block m-10 w-full text-center cursor-pointer">
      <!-- background shadow -->
      <div class="absolute inset-x-0 bottom-1 bg-gray-100 border border-gray-500 rounded-lg" />
      <!-- text -->
      <div class="relative bottom-1 text-xl font-thin leading-none tracking-wider py-4 px-10 bg-gray-100 border border-gray-500 rounded-lg transform hover:translate-y-1 transition duration-200 ease-in-out">
         Click Me!
      </div>
   </button>
</div>

First let's start by making sure that our CodePen is set up to include Tailwind CSS. Create a new CodePen and add Tailwind under the CSS settings.

Adding Tailwind to CodePen

Before we get down to making our button, let's give the area we're working in a little style. We use Tailwind CSS's flex classes to move the button in the center of our work area and adjusted the background color to a light gray give a little color behind our button.

html<div class="min-h-screen flex items-center justify-center bg-blue-600">
  <!-- button will go here -->
</div>

We'll get a nice blue background with this. We're also centering anything in this CodePen to the middle with flexbox.

We're going to break this down into two elements.

The button element will contain the button itself. Using Tailwind CSS, we're going to:

  • Use w-full to extend the button to be the full width of the parent div and since the button's width is full
  • Add m-10 for a margin of 2.5rem to create a little room.
  • Center text using text-center
  • Make sure our pointer changes when hovering over the button with cursor-pointer

The div inside of the button will create the block area that will contain the text 'Click Me!'. We'll style it with Tailwind CSS' rounded borders (rounded-lg), light gray background (bg-gray-100 ) and a slightly darker border (border-gray-500).

Tailwind CSS also has a couple of fun things that we can add to have fun with our fonts. Changing things like the

All these can make a difference. We'll make it slightly bigger with text-xl, a little thinner with font-thin, adjust the line height to its base (leading-none), and finally let's make the spacing between the letters wider than usual using tracking-wider.

It's always a good habit to get padding in there so your text doesn't go right up against the border, so padding along the x-axis px-10 and along the y-axis py-4 are added.

html<div class="min-h-screen flex items-center justify-center bg-blue-600">
  <button class="block m-10 w-full text-center cursor-pointer">
    <!-- text -->
    <div
      class="text-xl font-thin leading-none tracking-wider py-4 px-10 bg-gray-100 border border-gray-500 rounded-lg"
    >
      Click Me!
    </div>
  </button>
</div>

<div class="min-h-screen flex items-center justify-center bg-blue-600">
  <button class="block m-10 w-full text-center cursor-pointer">
      <!-- text -->
      <div class="text-xl font-thin leading-none tracking-wider py-4 px-10 bg-gray-100 border border-gray-500 rounded-lg">
         Click Me!
      </div>
  </button>
</div>

Adding a shadow element will give our button something different than the usual color changing or text changing hover.

We'll add a bg-gray-100 for a light gray background, a border-gray-500, and a rounded border using rounded-lg like we did to the text to our shadow.

html<div class="min-h-screen flex items-center justify-center bg-blue-600">
  <button class="block m-10 w-full text-center cursor-pointer">
    <!-- background shadow -->
    <div class="bg-gray-100 border border-gray-500 rounded-lg" />

    <!-- text -->
    <div
      class="text-xl font-thin leading-none tracking-wider py-4 px-10 bg-gray-100 border border-gray-500 rounded-lg"
    >
      Click Me!
    </div>
  </button>
</div>
<div class="min-h-screen flex items-center justify-center bg-blue-600">
  <button class="block m-10 w-full text-center cursor-pointer">
      <!-- background shadow -->
      <div class="bg-gray-100 border border-gray-500 rounded-lg" />
      <!-- text -->
      <div class="text-xl font-thin leading-none tracking-wider py-4 px-10 bg-gray-100 border border-gray-500 rounded-lg">
         Click Me!
      </div>
  </button>
</div>

But where is our shadow? Our button seems to have moved out of place and the shadow is no where near where we wanted it to be. We want the shadow to offset the text at the bottom.

Let's move the shadow behind the button and slightly below the text. First thing we need to do is figure out what is going to be positioned relative and what's going to be positioned absolute. I've always struggled with this and want to position everything absolute so everything is where I want it to be. But then it becomes a nightmare when you need to move one thing; everything just goes bonkers.

Rule of thumb is absolute items should be placed inside of relatively positioned items and relative items sit on top of positioned items. So when we move the relative parent, everything positioned inside stays put. Okay, here we go.

  • Position our button relative
  • The shadow div will be positioned absolute because I want this to be under my text div
  • The text div which will be positioned relative so it can sit on top of my shadow
  • inset-x-0 and bottom-1 is what's going to move my shadow down and my text up
html<div class="min-h-screen flex items-center justify-center bg-blue-600">
  <button class="relative block m-10 w-full text-center cursor-pointer">
    <!-- background shadow -->
    <div
      class="absolute inset-x-0 bottom-1 bg-gray-100 border border-gray-500 rounded-lg"
    />

    <!-- text -->
    <div
      class="relative bottom-1 text-xl font-thin leading-none tracking-wider py-4 px-10 bg-gray-100 border border-gray-500 rounded-lg"
    >
      Click Me!
    </div>
  </button>
</div>
<div class="min-h-screen flex items-center justify-center bg-blue-600">
   <button class="relative block m-10 w-full text-center cursor-pointer">
      <!-- background shadow -->
      <div class="absolute inset-x-0 bottom-1 bg-gray-100 border border-gray-500 rounded-lg" />
      <!-- text -->
      <div class="relative bottom-1 text-xl font-thin leading-none tracking-wider py-4 px-10 bg-gray-100 border border-gray-500 rounded-lg">
         Click Me!
      </div>
   </button>
</div>

The fun part! Using Tailwind CSS to make our button hoverable. Using Tailwind CSS' hover states is so much fun and so easy.

When we hover over the button, we want the text to cover the shadow like a key on a keyboard effect. First, we'll add the transform class to be able to manipulate the text block's movement on the y-axis. We'll use hover:translate-y-1 to move it down to cover that offset we put on the shadow. And guess what else we can control in Tailwind CSS? The duration and transition of the hover. We'll add transition, duration-200 and ease-in-out for a smooth hover.

html<div class="min-h-screen flex items-center justify-center bg-blue-600">
  <button class="relative block m-10 w-full text-center cursor-pointer">
    <!-- background shadow -->
    <div
      class="absolute inset-x-0 bottom-1 bg-gray-100 border border-gray-500 rounded-lg"
    />

    <!-- text -->
    <div
      class="relative bottom-1 text-xl font-thin leading-none tracking-wider py-4 px-10 bg-gray-100 border border-gray-500 rounded-lg transform hover:translate-y-1 transition duration-200 ease-in-out"
    >
      Click Me!
    </div>
  </button>
</div>
<div class="min-h-screen flex items-center justify-center bg-blue-600">
   <button class="relative block m-10 w-full text-center cursor-pointer">
      <!-- background shadow -->
      <div class="absolute inset-x-0 bottom-1 bg-gray-100 border border-gray-500 rounded-lg" />
      <!-- text -->
      <div class="relative bottom-1 text-xl font-thin leading-none tracking-wider py-4 px-10 bg-gray-100 border border-gray-500 rounded-lg transform hover:translate-y-1 transition duration-200 ease-in-out">
         Click Me!
      </div>
   </button>
</div>

Would you look at that?! An awesome 3D button made all with Tailwind CSS. We were able to make a button, create a shadow, refreshed on absolute and relative positioning, and made a y-axis movement on hover.

Want to learn more about Tailwind CSS? Check out Better Dev's Getting Started with Tailwind course.

Lynne Buencamino

Lynne Buencamino

Lynne Buencamino is an UI/UX Designer. Solves problems to create purposeful designs. Enjoys finding that perfect mesh between business goals and user experience.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)