Simple 3D CSS Buttons

#css #html #webdev #newbie

Hi, this is my first article and I will do a CSS tutorial for noobs.

HTML

The HTML is really simple here, we are putting 3 links using tag in the body.

<body>
    <a href="#" class="btn b-1">
        Button 1 (.b-1)
    </a>
    <a href="#" class="btn b-2">
        Button 2 (.b-2)
    </a>
    <a href="#" class="btn b-3">
        Button 3 (.b-3)
    </a>
</body>

We declared 3 buttons with 2 classes: btn for the basic CSS properties and b-x for three different behaviors.

CSS

Basic CSS properties

Ok, let's go to CSS part. I will jump to buttons part, I'm not explaining the body properties, because it's useless now.

.btn {
  color: #e5dc15;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  margin: 1rem;
  padding: 0.5rem;
  border: 2px solid #e5dc15;
  border-radius: 0.5rem;
}

.btn:hover {
  background: #e5dc15;
  color: #0e79b2;
}

We declared some basic properties to give buttons colors and borders.

"3D" property

Ok I like to call it "3D" because it adds a shadow in the third dimension. Let's add this property to .btn class.
box-shadow: 0 0.6em #c2bb11, 0 0.9em rgba(0, 0, 0, 0.4);
What does it do? We are declaring two shadows, the first value is the horizontal offset (which is obviously zero), the second is the vertical offset, then there is the color.
We are setting a shadow using darker yellow to do the "3D" shape, then we are adding the "real" gray shadow to button.

Transitions properties and related

Now we are adding 3 properties to .btn class, these are the base of the transition, the starting point.

  position: relative;
  top: 0;
  transition: all 300ms ease-in-out;

We are setting the position: relative, to set then the top property to zero, the base.
Then we set the transition on all the elements (in this case background, text, position and box-shadow) with a duration of 300ms and the timing function which give a smoother transition.

Button transitions

Ok let's set three different :hover and three :active declarations for the three buttons.

b-1

The first button will lower on hover and get even lower on click.
So we will set top: 0.2em to lower button of 0.2em and then we are lowering also the box shadow for same values.
Then we will set top: 0.4em and box-shadows in the same way as before.

.btn.b-1:hover {
  top: 0.2em;
  box-shadow: 0 0.4em #c2bb11, 0 0.7em rgba(0, 0, 0, 0.4);
}

.btn.b-1:active {
  top: 0.4em;
  box-shadow: 0 0.2em #c2bb11, 0 0.5em rgba(0, 0, 0, 0.4);
}

b-2

In the second button we don't do nothing on hover, but we lower it all on the click.
So we put top: 0.6em to lower the button for the maximum value of initial yellow box shadows, but we leave a little gray shadow to leave the "3d effect".

 .btn.b-2:active {
  top: 0.6em;
  box-shadow: 0 0.2em rgba(0, 0, 0, 0.4);
}

b-3

In the third button we are lifting the button on hover and doing the same thing as first button on click.
So how can we lift the button? You could use bottom properties, but you should also set it to zero for the initial classes.
Here, for simplicity, we are using a negative top value, which it works in the same way.
So we set the negative top value and an higher gray shadow, because element is now higher.

.btn.b-3:hover {
  top: -0.5em;
  box-shadow: 0 0.6em #c2bb11, 0 1.3em rgba(0, 0, 0, 0.4);
}

.btn.b-3:active {
  top: 0.4em;
  box-shadow: 0 0.2em #c2bb11, 0 0.5em rgba(0, 0, 0, 0.4);
}

Conclusion

Ok, we finished this simple CSS tutorial. Maybe the next will be on a Canvas animation i would like to use in my new portfolio website.

Thank you.

Demo & code: CodeSandbox

Top comments (5)

Igor Zanella • Sep 18 '20

Thank you, with keyframes would be more "animated", but I did this as first article to "test" how to do. This is a simple thing, I did these buttons just for this tutorial, so I think I won't personalize them anymore.