Art of making satisfying buttons
Tags: webdev, css, tutorial, design
Published: 2021-07-07 13:28:32

There is only one rule of making a satisfying button. When You press it, You need to feel the same as pressing a physical one.

#Create cohesive 3D space
When You create a website, You need to imagine how it looks in 3D space. *Why bother?* Because every time You use a shadow, You simulate that the element is either thicker or floating. Understanding 3D will help You fake depth later with CSS. Let's start with shadows.

##Make shadows feel real
![The button press animation.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vhaiif5rtin15lnc5d7.gif)
<figcaption>Shadows get smaller on the button press.</figcaption>
&nbsp;
Firstly there are no shadows without the light. Ask Yourself:
* Where is the website's light source?
* How strong is it?
* How diffuse is it?

Answers for the above will help You decide what shape of shadows You should use and how to animate them. 
Besides the light, there is only one more rule to follow:
>The thicker the button, the longer and more diffuse shadows are.

###Let's add some shadows
```css
button {
  /* Use realistic shadows */
  box-shadow: 1px -1px 2px 0 hsla(0, 0%, 0%, 0.06),
              3px -3px 4px 0 hsla(0, 0%, 0%, 0.08);
}

/* On button press */
button:active {
  /* Make shadows much smaller */
  box-shadow: 0 0 1px 0 hsla(0, 0%, 0%, 0.06),
              1px -1px 1px 0 hsla(0, 0%, 0%, 0.08);
}
```
Learn more about realistic shadows in [The master guide to smooth, realistic shadows in CSS](https://dev.to/devang/the-master-guide-to-smooth-realistic-shadows-in-css-463p) by Devang Saklani.

##Remember about perspective
![The button press animation in perspective.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lknle562fd0arr26u150.gif)
<figcaption>The button gets smaller on press.</figcaption>
&nbsp;
###Firstly what is perspective?
Simply put, perspective is an optical illusion that makes things further away appear smaller.

###Perspective in web design
In web design, we need to fake the perspective. To do that, You can make floating elements larger than those below them. In the case of a button, it'll get smaller on press.
That might be enough, but if You want to make perspective more obvious, You may want to show the side of a button. It'll feel like looking at the interface from an angle.

###How to implement perspective?
```css
button {
  /* Make sure that transform-origin match translate() direction. 
     It makes translate() and scale() work it the same axis */  
  transform-origin: bottom center;
}

/* On button press */
button:active {
  /* Apply perspective transformation */
  transform: 
    /* Translate down on Y axis */
    translatey(0.25em) 
    /* Make button smaller */
    scale(0.98);
}
```
For more insight on perspective, check out [Fix Your Perspective](https://www.youtube.com/watch?v=JQ6Ry_yfj80) by Matt Kohr.

##Make it move
Bear in mind, adding `transition` is not always necessary for small scale transformations. It's like in classic animation. Our mind will fill the gaps. 
In the case of buttons, we may use a brief `transition` to keep them pressed for a bit longer. It'll help the user to see the impact of clicking it.
###How to add transition?
```css
button {
  /* Add short transition with a delay 
     This transition will control second half of the animation */
  transition: 
    transform 50ms ease-in 10ms,
    box-shadow 50ms ease-in 10ms;
}

/* On button press */
button:active {
  /* Add short transition
     This transition will control first half of the animation */
  transition: 
    transform 50ms ease-in,
    box-shadow 50ms ease-in;
}
```
For the best guide on animation — check out [12 Principles of Animation](https://youtu.be/uDqjIdI4bF4) by Frank Thomas & Ollie Johnston.

##Let's see the implementation
{% codepen https://codepen.io/ammadeo/pen/rNyEmbL default-tab=result %}

#One last tip
To optically centre a button's content, try moving it up a bit.
```css
button {
  padding-top: 1rem;
  /* Make bottom padding slightly larger */
  padding-bottom: 1.05rem;
}
```

#Challenge for You
Go and press some buttons around You. *For science!*