3D Buttons

We can make a button feel like a 3 dimensional one by applying certain effects to it when pressed. In this article, we will create a 3 dimensional button press effect and look at similar examples.

Let’s create a button and give it some styling.

<button class="button-3d">&#9998;</button>

button.button-3d {
  background-color: #48abe0;
  color: white;
  border: none;
  padding: 5px;
  font-size: 31px;
  height: 130px;
  width: 130px;
}

We notice that the button doesn’t feel 3D yet. It is just a flat surface, resting on another flat surface. Let’s add a box-shadow to it so that it feels 3D and a bit higher from the surface.

box-shadow: 0 2px 4px darkslategray;

Now that we have our button feeling like 3D already, all we need to do is to adjust the button position and its shadow when it is pressed - in a way that the effect feels like a physical key press. What happens when you actually press a button on your keyboard? The button moves a bit down and its shadow disappears because it has reached the level of the surface behind/below it. Let’s apply the same effect to our virtual button. We will translate it slightly down on the Y-axis and shrink its box-shadow. We will also add a transition so it appears to be visually moving. The transition should be very short so the button still feels fast and responsive.


button.button-3d {
  transition: all 0.03s linear;
}

button.button-3d:hover {
  background-color: #65b9e6;
}

button.button-3d:active {
  box-shadow: 0 0 2px darkslategray;
  transform: translateY(2px);
}

There we go. The button press feels like a physical three dimensional one.