3D Buttons in CSS

Hello everybody, I Want to share with you a small trick that will make your HTML buttons look like 3D buttons.

In this protip we will make this example : 3D Button using only CSS

One of the nice things with borders is that you don't have to use all their parts (top, right, bottom, left). You can give different width and color for the right and the bottom borders of the same element and this will create a nice manipulation of 3D buttons.

Let's get started!

First will make regular button

HTML

<a class="button">
  Esc  
</a>

CSS

.button{
  float:left;
  margin-right:2px;
  background-color: #bbb;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  font-weight: bold;  
  border: solid 5px #000;
}

Now, we can get different width and color for every side of the border.
Next I will add background-clip:padding-box; that will make background-color only on the padding and the content and I will add border radius for making the button smoother.

CSS

.button{
  /**ADD this**/  
  border-width: 0 4px 5px 0;
  border-radius: 5px;
  border-color: transparent #ddd #999 transparent;
  background-clip: padding-box;  
}

Yeay! We made a 3D button using only CSS borders!

LIVE EXAMPLE

Now if you want it to be clickable(:hover) you just need to add :hover styles. We add styles that will change width of the borders for something like half the size for making the effect of clicking. Beside It will add little manipulation of positions with position relative and margin-right (resolve movement of buttons that are near).

CSS

.button:hover{
  border-width: 0 2px 3px 0; 
  margin-right: 4px;
  position: relative;
  left: 2px;
  top: 3px;
}

That's it,we have made "keyboard button", Enjoy!

If you like this post, I will be happy to get your UPVOTE. You are welcome to follow me or my team @Walla! R&D and endorse my skills.

Elad Shechter.