loading...
Cover image for Simple 3D CSS Buttons

Simple 3D CSS Buttons

igorzanelladev profile image Igor Zanella ・3 min read

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.

Buttons

"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.
Buttons

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

Button

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

Button

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

Button

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

Posted on by:

igorzanelladev profile

Igor Zanella

@igorzanelladev

Hey! I'm a Freelance Web Developer and Social Media Manager. Check my website!

Discussion

pic
Editor guide
 

nice work, totally throw back to my speak n spell. I think i will use these in my project. Check out key-frames css animations to add some sparkle to your rad buttons w3schools.com/cssref/css3_pr_anima...
thank you for sharing

 

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.

 

Good one! Thanks for sharing.

 

thanks nice and useful...