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

HTML

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

<button>CLICK</button>

CSS

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; 
}

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; 
}

You can get full code here with video tutorial

Thank you for reading ❤️