How to create a 3D Button Tailwind CSS

Let’s create a 3D button using only Tailwind CSS. A super short tutorial, but it’s a great way to learn how to use Tailwind CSS.

What is a 3D button?

A 3D button is a button that has a 3D effect when it is hovered over. It can be a simple button with a 3D effect or a more complex button with multiple layers of 3D effects. The 3D effect can be achieved using CSS transforms and transitions. The button can have a background color, text color, and border color. The button can also have a hover effect that changes the background color, text color, and border color. The 3D effect can add depth and dimension to the button, making it more visually appealing and engaging.

The code

• bg-[linear-gradient(#e9e9e9,#e9e9e9_50%,#fff)]: This is the wrappper of the button, we apply a gradient background.

• bg-[linear-gradient(to_top,#ececec,#fff)]: This is going to act like the border of the button, we apply a gradient background, slightly different from the wrappper, to create contrast.

• shadow-[0_0_1px_rgba(0,0,0,0.07),0_0_1px_rgba(0,0,0,0.05), 0_3px_3px_rgba(0,0,0,0.25), 0_1px_3px_rgba(0,0,0,0.12)]: This is the custom shadow of the button, and we remove with hover:shadow-none on hover, to remove the contrast and make it look pressed. This will also remove the darker color on the wrappper removing contrast within the wrapper and the “border” of the button.

• bg-[linear-gradient(#f4f4f4,#fefefe)]: This is where you will add your text, we apply a gradient background, slightly different from the wrappper and border, to create contrast, then when hover whe change it with group-hover:bg-[linear-gradient(#e2e2e2,#fefefe)].

The full code

<button

  class="bg-[linear-gradient(#e9e9e9,#e9e9e9_50%,#fff)] group w-full h-16 inline-flex transition-all duration-300 overflow-visible p-1 rounded-full group">
  <div
    class="w-full h-full bg-[linear-gradient(to_top,#ececec,#fff)] overflow-hidden shadow-[0_0_1px_rgba(0,0,0,0.07),0_0_1px_rgba(0,0,0,0.05),0_3px_3px_rgba(0,0,0,0.25),0_1px_3px_rgba(0,0,0,0.12)] p-1 rounded-full hover:shadow-none duration-300">
    <div
      class="w-full h-full text-xl gap-x-0.5 gap-y-0.5 justify-center text-[#101010] bg-[linear-gradient(#f4f4f4,#fefefe)] group-hover:bg-[linear-gradient(#e2e2e2,#fefefe)] duration-200 items-center text-[18px] font-medium gap-4 inline-flex overflow-hidden px-4 py-2 rounded-full black group-hover:text-orange-600">
      Jenson button
    </div>
  </div>
</button>

Wrapping up

Thats it, you have a 3D button with Tailwind CSS. You can use this button as a starting point for your own 3D buttons, or you can customize it to fit your needs. Remember to make the button accessible before you use it.

Hope you enjoyed this tutorial and have a great day and more of this next time!

/Michael Andreuzza