DEV Community


Posted on • Updated on • Originally published at

Beautiful 3d button - A step-by-step guide


For HTML we have only one button element with "CLICK" text.

Enter fullscreen mode Exit fullscreen mode


For CSS, we'll set some basic styling to a button.

First we'll remove button's default border, by setting border property to none.

Then we'll set the background color to light purple (#976D70) and text color to white (#fff).

Now we'll add some padding so it looks nice.
And of course the transition. So the hover effect, which we'll add later, is nice and smooth.

We'll set the border radius to 6px.

And then we'll add two shadows.

The first one (#665367 0 7px 2px) represents the bottom side of the button, which creates a 3d effect, and the second one (#000 0 8px 6px) is the actual shadow.

button { 
  border: none; 
  background-color: #976D70; 
  color: #fff; 
  padding: 10px 20px; 
  transition: .2s; 
  border-radius: 6px; 
  box-shadow: #665367 0 7px 2px, 
              #000 0 8px 6px; 
  cursor: pointer; 
Enter fullscreen mode Exit fullscreen mode

When active (on click), we'll transform the button by 8px and decrease the shadows.
That will create button press effect.

button:active { 
  transform: translateY(8px); 
  box-shadow: #665367 0 0 0, #000 0 0 3px; 
Enter fullscreen mode Exit fullscreen mode

You can get full code here with video tutorial

Thank you for reading ❤️

Top comments (0)