$color--primary:  #059CE8;

body {
  background-color: lighten($color--primary, 45%);
  height: 100vh;
  margin: 0;
  padding-top: 45vh;
  text-align: center;
}

button {
  background-color: $color--primary;
  background-position: center;
  border-radius: 2px;
  border: none;
  color: white;
  cursor: pointer;
  font-family: Arial;
  font-size: 30px;
  outline: none;
  padding: 30px 50px;
  text-transform: uppercase;
  transition: background 0.8s;
  
  &:hover {
    background: darken($color--primary, 5%) radial-gradient(circle, transparent 1%, darken($color--primary, 5%) 1%) center/15000%;
  }
  
  &:active {
    background-color: darken($color--primary, 10%);
    background-size: 100%;
    transition: background 0s;
  }
}