Other box shadow features

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects -->

<button>Press me!</button>

CSS

button {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}

button:focus, button:hover {
  background-image: linear-gradient(to bottom right, #888, #eee);
}

button:active {
  box-shadow: 2px 2px 2px rgba(0,0,0,0.7);
  transform: translateY(3px) translateX(3px);
}