<button>Обратный звонок</button>

html,
body {
  width: 100%;
  height: 100%;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  $color1: #FFE546;
  $color2: darken($color1, 10%);
  border-radius: 1000px;
  border: none;
  border-bottom: 2px solid #EEB23A;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 17px 20px 14px;
  cursor: pointer;
  background: linear-gradient(to bottom, $color1, $color2);
  box-shadow: 0 10px 30px rgba(#000, 0.2);
  
  &:hover {
    $color1: darken($color1, 10%);
    $color2: darken($color2, 10%);
    background: linear-gradient(to bottom, $color1, $color2);
  }
  
  &:focus {
    outline: none;
    box-shadow: (
      0 0 0 3px rgba(blue, 0.5),
      0 10px 30px rgba(#000, 0.2)
    );
  }
  
  &:active {
    background: linear-gradient(to bottom, $color2, $color1);
  }
}