<button>Press hard</button>

@use postcss-cssnext; /* used for the awesome color()-function */

:root {
  --btnColor: #eee;
}

body {
  background: #eee;
  padding: 5em 0;
  text-align: center;
}

button {
  font: bold 3rem Roboto, sans-serif;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0 0.08em 0 rgba(255, 255, 255, 0.5);
  display: inline-block;
  outline: none;
  cursor: pointer;
  padding: 0.4em 1em 0.5em;
  border-radius: 0.3em;
  border: 2px solid;
  border-color: color(var(--btnColor) shade(20%)) color(var(--btnColor) shade(30%)) color(var(--btnColor) shade(40%));
  background-color: var(--btnColor);
  background-image: linear-gradient(var(--btnColor), color(var(--btnColor) shade(10%)));
  box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.1), 0 0.1em 0.2em rgba(0, 0, 0, 0.3), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
  transition: all 100ms;
}

button:hover,
button:focus {
    box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4), 0 0.1em 0.2em rgba(0, 0, 0, 0.4), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
}
  
button:active {
    padding: 0.4em 1em 0.4em;
    margin-top: 0.1em;
    border-color: color(var(--btnColor) shade(30%)) color(var(--btnColor) shade(20%)) var(--btnColor);
    background-image: linear-gradient(color(var(--btnColor) shade(5%)), var(--btnColor));
    box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.1) inset, 0 0.1em 0.1em rgba(0, 0, 0, 0.2) inset, 0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset, -0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset;
    transition-duration: 10ms;
  }