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.
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.
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.
