Simple 3D CSS Buttons
Tags: css, html, webdev, newbie
Published: 2020-09-17 18:53:28

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 <a> 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](https://dev-to-uploads.s3.amazonaws.com/i/cg57p11885gtg1ektgdh.jpg)

####"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](https://dev-to-uploads.s3.amazonaws.com/i/tshbclmgzr88mph2e9iz.jpg)

####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](https://dev-to-uploads.s3.amazonaws.com/i/ls6cz4j78783es0cbt2x.jpg)
####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](https://dev-to-uploads.s3.amazonaws.com/i/2jhbhp5yna4pf2qobx8p.jpg)
####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](https://dev-to-uploads.s3.amazonaws.com/i/shop08hsbm0qvo9mjb9m.jpg)
##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](https://codesandbox.io/s/simple-css-3d-buttons-5c9rg)