.button {
  display: block;
  appearance: none;
  width: 100%;
  height: 70px;
  line-height: 1.2;
  border: none;
  padding: 24px;
  @include font-size(20px);
  text-align: left;
  background-color: $medium_cyan;
  color: $white;
  font-weight: bold;
  text-decoration: none;
  transition: background 250ms ease, color 250ms ease;
  &:hover {
    background-color: darken($medium_cyan,3%);
  }
  &:focus {
    outline: 3px solid #ffbf47;
  }
  &--grey {
    background-color: $light_grey;
    color: $dark_grey;
    &:hover {
      background-color: darken($light_grey,5%);
    }
  }
  &--pink {
    background-color: $dark_pink;
    color: $white;
    &:hover {
      background-color: darken($dark_pink,5%);
    }
  }
}

.button {
  display: block;
  appearance: none;
  width: 100%;
  height: 70px;
  line-height: 1.2;
  border: none;
  padding: 24px;
  @include font-size(20px);
  text-align: left;
  background-color: $medium_cyan;
  color: $white;
  font-weight: bold;
  text-decoration: none;
  transition: background 250ms ease, color 250ms ease, box-shadow 250ms ease;
  outline: 0;
  &:hover {
    background-color: darken($medium_cyan,3%);
  }
  &:focus {
    //outline: 3px solid #ffbf47;
  }
  &:focus, &:hover {
    background-color: darken($medium_cyan,3%);
    box-shadow: 0 5px 12px rgba(#000,0.3);
  }
  &:active {
    background-color: darken($medium_cyan,5%);
    outline: 0;
  }

  &--grey {
    background-color: $light_grey;
    color: $dark_grey;
    &:hover {
      background-color: darken($light_grey,5%);
    }
    &:focus {
      background-color: darken($light_grey,8%);
    }
  }
  &--pink {
    background-color: $dark_pink;
    color: $white;
    &:hover {
      background-color: darken($dark_pink,5%);
    }
    &:focus {
      background-color: darken($light_pink,8%);
    }
  }
}

Add a dropshadow to the buttons on hover
Add a dropshadow to the buttons on hover

Yea baby
