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.
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>
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
Get lifetime access to every theme available today for $199 $139 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!