.btn-blue,
.btn-red,
.btn-green,
.btn-disabled {

  &:not(.btn-outline):not(.btn-link) {
    box-shadow: inset 0 -1px 0 0 rgba($black, 0.15);
    text-shadow: 0 0 1px rgba($black, 0.3);
    position: relative;
    overflow: hidden;
    background-size: 100%;
    z-index: 1;

    &::before {
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      top: 0; left: 0;
      opacity: 0;
      width: 100%;
      z-index: -100;
      transition: opacity 0.3s;
    }

    &:hover {

      &::before {
        opacity: 1;
      }
    }
  }
}

.btn-blue {
	background-image: $blue-gradient;

  &::before {
    background-image: $blue-hover-gradient;
  }

  &.btn-link {
    background-color: transparent;
    box-shadow: none;
    color: $soft-blue;

    &:hover {
      color: darken($soft-blue, 7%);
      box-shadow: none;
    }
  }
}

.btn-red {
	background-image: $red-gradient;

  &::before {
    background-image: $red-hover-gradient;
  }

  &.btn-link {
    background-color: transparent;
    box-shadow: none;
    color: $red;

    &:hover {
      color: darken($red, 7%);
      box-shadow: none;
    }
  }
}

.btn-green {
	background-image: $green-gradient;

  &::before {
    background-image: $green-hover-gradient;
  }

  &.btn-link {
    background-color: transparent;
    box-shadow: none;
    color: $green;

    &:hover {
      color: darken($green, 5%);
      box-shadow: none;
    }
  }
}

.btn-disabled {
	background-color: $disabled;
}
