DEV Community

Cover image for Simple 3D CSS Buttons
Igor Zanella
Igor Zanella

Posted on

Simple 3D CSS Buttons

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


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

    <a href="#" class="btn b-1">
        Button 1 (.b-1)
    <a href="#" class="btn b-2">
        Button 2 (.b-2)
    <a href="#" class="btn b-3">
        Button 3 (.b-3)
Enter fullscreen mode Exit fullscreen mode

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


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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.


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);
Enter fullscreen mode Exit fullscreen mode



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);
Enter fullscreen mode Exit fullscreen mode



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);
Enter fullscreen mode Exit fullscreen mode



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 (6)

igorzanelladev profile image
Igor Zanella

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.

raghavmisra profile image
Raghav Misra

Good one! Thanks for sharing.

raounek profile image
touibeg mohamed

thanks nice and useful...

ayabouchiha profile image
Aya Bouchiha


weirdyang profile image

this is a good clear example! thanks. trying to figure out how to use it to make sunken buttons.