essence/scss/bootstrap/_buttons.scss

// Default buttons
.btn {
  // Remove gradient on btn-link
  &-link {
    background-image: none;
  }

  // Tertiary
  &-tertiary {
    color: $gray-600;
    background-color: $gray-200;

    &:hover, &:active, &:focus {
      color: $black;
      background-color: $gray-300;
      border-color: $gray-300;
    }
  }

  &-success {
    color: $white;

    &:hover {
      color: $white;
      background-color: $green-600;
    }
  }

  &-warning {
    color: $white;

    &:hover {
      color: $white;
      background-color: $orange-600;
    }
  }
}

// Outline buttons
.btn-outline {
  &-success:hover {
    color: $white;
  }

  &-warning:hover {
    color: $white;
  }

  // Tertiary
  &-tertiary {
    color: $gray-600;
    border-color: $gray-400;

    &:hover {
      color: $black;
      background-color: $gray-200;
      border-color: $gray-200;
    }
  }
}

// Tender class
.btn-tender {
  &-primary {
    color: $primary;
    background-color: $primary-50;
    border-color: $purple-400;

    &:hover {
      color: #fff;
      background-color: $primary;
      border-color: $primary;
    }
  }

  &-secondary {
    color: $gray-800;
    background-color: $gray-200;
    border-color: $gray-500;

    &:hover {
      color: #fff;
      background-color: $secondary;
      border-color: $secondary;
    }
  }

  // Tertiary
  &-tertiary {
    color: $gray-700;
    background-color: $gray-100;
    border-color: $gray-400;

    &:hover, &:active, &:focus {
      color: $black;
      background-color: $gray-200;
      border-color: $gray-200;
    }
  }

  &-success {
    color: $success;
    background-color: $success-50;
    border-color: $green-400;

    &:hover {
      color: #fff;
      background-color: $success;
      border-color: $success;
    }
  }

  &-info {
    color: $info;
    background-color: $info-50;
    border-color: $blue-400;

    &:hover {
      color: #fff;
      background-color: $info;
      border-color: $info;
    }
  }

  &-warning {
    color: $warning;
    background-color: $warning-50;
    border-color: $orange-400;

    &:hover {
      color: #fff;
      background-color: $warning;
      border-color: $warning;
    }
  }

  &-danger {
    color: $danger;
    background-color: $danger-50;
    border-color: $red-400;

    &:hover {
      color: #fff;
      background-color: $danger;
      border-color: $danger;
    }
  }
}

// Phantom class
.btn-phantom {
  &-primary, &-secondary, &-success, &-info, &-warning, &-danger {
    background-color: transparent;
  }

  &-primary:hover {
    color: $primary;
    background-color: $primary-50;
  }
  &-secondary:hover {
    color: $black;
    background-color: $secondary-50;
  }
  &-tertiary:hover {
    color: $gray-600;
    background-color: $gray-100;
  }
  &-success:hover {
    color: $success;
    background-color: $success-50;
  }
  &-info:hover {
    color: $info;
    background-color: $info-50;
  }
  &-warning:hover {
    color: $warning;
    background-color: $warning-50;
  }
  &-danger:hover {
    color: $danger;
    background-color: $danger-50;
  }
}