A nice default button CSS animation

Whenever I create a new project and I want to keep it lightweight without adding any component libraries and so on, I just fiddle together some styles for a button but I rarely take the time to make it look really nice and responsive.

So I spent 15 minutes in creating a button style which looks nice in my opinion. If you like it too, feel free to use it in your project! This is how it looks like:

<style>
  button {
    background-color: rgb(37, 99, 235);
    font-weight: bold;
    color: white;
    padding: 10px 16px;
    font-size: 1rem;
    border-radius: .5rem;
    transition: all .15s cubic-bezier(0.4,0,0.2,1);
    border: none;
    cursor: pointer;
  }

  button:hover {
    background-color: rgb(29,78,216);
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

  button:active {
    position: relative;
    top: 1px;
    right: 1px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }
</style>

<div style="margin: 6rem;">
  <button>Click me</button>
</div>

First some general rules, deep blue background, white bold font, padding, rounded corners, no border and pointer cursor.

Next a hover effect which makes the background color a little darker and adds a box shadow which makes it look like the button elevates up a little bit.

Lastly an active state that does two things in order to make it look like you actually press that button down:

1. It changes the position slightly towards the bottom left
2. It reduces the box shadow we set earlier in the hover effect

That way it looks like it is less elevated i.e. pressed down.