.btnVariant(@color, @keyHoverColor, @keyBoxColor) {
  border-top: 2px solid @color;
  background-color: @color;

  box-shadow: inset 0 1px 0 @color, 0 10px 0 @keyBoxColor;
  -moz-box-shadow: inset 0 1px 0 @color, 0 10px 0 @keyBoxColor;
  -webkit-box-shadow: inset 0 1px 0 @color, 0 10px 0 @keyBoxColor;

  &:active {
    top: 10px;
    background-color: @color;

    -webkit-box-shadow: inset 0 1px 0 @color, inset 0 -3px 0 @keyHoverColor;
    -moz-box-shadow: inset 0 1px 0 @color, inset 0 -3pxpx 0 @keyHoverColor;
    box-shadow: inset 0 1px 0 @color, inset 0 -3px 0 @keyHoverColor;
  }
}

.key-btn {
  border: none;
  outline: none;
  display: inline-block;
  background-color: transparent;
  font-size: 1.5rem;
  font-weight: bolder;
  text-decoration: none;
  padding: 15px 25px;
  border-radius: 4px;
  position: relative;

  &:not(.yellow-btn) {
    color: white;
  }

  &:active {
    outline: none;
    top: 2px;
    border-top: 2px solid @cola;
  }

  &:after {
    height: 103%;
    width: 103%;
    padding: 4px;
    position: absolute;
    bottom: -15px;
    left: -4px;
    z-index: -1;
    background-color: @cola;
  }

  &.pink-btn {
    .btnVariant(@pink, @keyBoxPink, @keyBoxPink);
  }

  &.blue-btn {
    .btnVariant(@blue, @keyBoxBlue, @keyBoxBlue);
  }

  &.red-btn {
    .btnVariant(@red, @keyBoxRed, @keyBoxRed);
  }

  &.green-btn {
    .btnVariant(@green, @keyBoxGreen, @keyBoxGreen);
  }

  &.yellow-btn {
    .btnVariant(@yellow, @keyBoxYellow, @keyBoxYellow);
  }

  &.orange-btn {
    .btnVariant(@orange, @keyBoxOrange, @keyBoxOrange);
  }

  &.purple-btn {
    .btnVariant(@purple, @keyBoxPurple, @keyBoxPurple);
  }

  &.black-btn {
    .btnVariant(@diffblack, @keyBoxBlack, @keyBoxBlack);
  }

  &.white-btn {
    .btnVariant(@diffwhite, @keyBoxWhite, @keyBoxWhite);
  }

  &.rounded-btn {
    border-radius: 30px;
  }
}