btn-resulting-css.css

.btn, .btn--link, .btn--blue, .btn--green, .btn--gray {
  padding: 1rem;
  border: 2px solid #ccc;
  border-radius: 2px;
  color: #333;
  text-decoration: none;
  text-align: center; }

.btn:hover, .btn:focus, .btn:active {
  background-color: rgba(0, 0, 0, 0.05); }

.btn--s {
  padding: 0.5rem; }

.btn--link {
  border-color: transparent;
  color: #3498db; }
  .btn--link:hover {
    background-color: transparent;
    color: #1d6fa5; }

.btn--blue {
  border-color: #2792d9;
  background-color: #3498db;
  color: #fff; }
  .btn--blue:hover, .btn--blue:focus, .btn--blue:active {
    background-color: #217dbb; }

.btn--green {
  border-color: #22a977;
  background-color: #25ba84;
  color: #fff; }
  .btn--green:hover, .btn--green:focus, .btn--green:active {
    background-color: #1d8f65; }

.btn--gray {
  border-color: rgba(59, 59, 59, 0.99);
  background-color: rgba(72, 72, 72, 0.99);
  color: #fff; }
  .btn--gray:hover, .btn--gray:focus, .btn--gray:active {
    background-color: rgba(46, 46, 46, 0.99); }

btn-sass.scss

%btn--base {
  padding: $padding;
  border: 2px solid #ccc;
  border-radius: 2px;
  color: $font-color;
  text-decoration: none;
  text-align: center;
}

.btn {
  @extend %btn--base;

  &:hover,
  &:focus,
  &:active {
    background-color: rgba(0,0,0,0.05);
  }
}

.btn--s {
  padding: $padding/2;
}

.btn--link {
  @extend %btn--base;

  border-color: transparent;
  color: $link-color;

  &:hover {
    background-color: transparent;
    color: darken($link-color, 15%);
  }
}

.btn--blue {
  @extend %btn--base;

  border-color: darken($blue, 3%);
  background-color: $blue;
  color: $white;

  &:hover,
  &:focus,
  &:active {
    background-color: darken($blue, 10%);
  }
}

.btn--green {
  @extend %btn--base;

  border-color: darken($green, 4%);
  background-color: $green;
  color: $white;

  &:hover,
  &:focus,
  &:active {
    background-color: darken($green, 10%);
  }
}

.btn--gray {
  @extend %btn--base;

  border-color: darken($dark-gray, 5%);
  background-color: $dark-gray;
  color: $white;

  &:hover,
  &:focus,
  &:active {
    background-color: darken($dark-gray, 10%);
  }
}