Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>Normal</p>

<a class="btn btn--primary">Button</a>
<a class="btn btn--primary btn--outline">Button</a>

<a class="btn btn--secondary">Button</a>
<a class="btn btn--secondary btn--outline">Button</a>

<a class="btn btn--tertiary">Button</a>
<a class="btn btn--tertiary btn--outline">Button</a>

<p>Large</p>

<a class="btn btn--primary btn--large">Button</a>
<a class="btn btn--primary btn--outline btn--large">Button</a>

<a class="btn btn--secondary btn--large">Button</a>
<a class="btn btn--secondary btn--outline btn--large">Button</a>

<a class="btn btn--tertiary btn--large">Button</a>
<a class="btn btn--tertiary btn--outline btn--large">Button</a>

<p>Block</p>

<a class="btn btn--primary btn--block">Button</a>
<a class="btn btn--secondary btn--block">Button</a>
<a class="btn btn--tertiary btn--block">Button</a>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

// Button background styles (name, colour)
$btn-backgrounds: (
  'primary': DarkSlateBlue,
  'secondary': DeepSkyBlue,
  'tertiary': MediumVioletRed
) !default;

// Base button styles
%btn-base {
  display: inline-block;
  vertical-align: middle;
  font: inherit;
  text-align: center;
  margin: 0;
  border: none;
  cursor: pointer;
  overflow: visible;

  &,
  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
  }
}

// Button
.btn {
  @extend %btn-base;
  
  // Additional btn styles
  border: 2px solid;
  transition: all 250ms;
  padding: 1rem;
  
  // Each colour
  @each $key, $value in $btn-backgrounds {
    &--#{$key} {
      background: $value;
      border-color: $value;
      
      &:hover,
      &:active {
        background: lighten($value, 10%);
        border-color: lighten($value, 10%);
      }
      
      // Button outline hover state
      &.btn--outline {
        &:hover,
        &:active {
          background: $value;
          border-color: $value;
        }
      }
    }
  }
  
  // Outline style
  &--outline {
    background: none;
  }
  
  // Block style
  &--block {
    display: block;
    width: 100%;
  }
  
  // Large
  &--large {
    font-size: 2rem;
    padding: 2rem;
  }
  
  // Adjust color if on dark background
  &--on-light {
    color: black;
  }
  
  // Adjust color if on light background
  &--on-dark {
    color: white;
  }
}

SassMeister-output.css

.btn {
  display: inline-block;
  vertical-align: middle;
  font: inherit;
  text-align: center;
  margin: 0;
  border: none;
  cursor: pointer;
  overflow: visible;
}
.btn, .btn:hover, .btn:active, .btn:focus {
  text-decoration: none;
}

.btn {
  border: 2px solid;
  transition: all 250ms;
  padding: 1rem;
}
.btn--primary {
  background: DarkSlateBlue;
  border-color: DarkSlateBlue;
}
.btn--primary:hover, .btn--primary:active {
  background: #5a4dae;
  border-color: #5a4dae;
}
.btn--primary.btn--outline:hover, .btn--primary.btn--outline:active {
  background: DarkSlateBlue;
  border-color: DarkSlateBlue;
}
.btn--secondary {
  background: DeepSkyBlue;
  border-color: DeepSkyBlue;
}
.btn--secondary:hover, .btn--secondary:active {
  background: #33ccff;
  border-color: #33ccff;
}
.btn--secondary.btn--outline:hover, .btn--secondary.btn--outline:active {
  background: DeepSkyBlue;
  border-color: DeepSkyBlue;
}
.btn--tertiary {
  background: MediumVioletRed;
  border-color: MediumVioletRed;
}
.btn--tertiary:hover, .btn--tertiary:active {
  background: #e827a0;
  border-color: #e827a0;
}
.btn--tertiary.btn--outline:hover, .btn--tertiary.btn--outline:active {
  background: MediumVioletRed;
  border-color: MediumVioletRed;
}
.btn--outline {
  background: none;
}
.btn--block {
  display: block;
  width: 100%;
}
.btn--large {
  font-size: 2rem;
  padding: 2rem;
}
.btn--on-light {
  color: black;
}
.btn--on-dark {
  color: white;
}

SassMeister-rendered.html

<p>Normal</p>

<a class="btn btn--primary">Button</a>
<a class="btn btn--primary btn--outline">Button</a>

<a class="btn btn--secondary">Button</a>
<a class="btn btn--secondary btn--outline">Button</a>

<a class="btn btn--tertiary">Button</a>
<a class="btn btn--tertiary btn--outline">Button</a>

<p>Large</p>

<a class="btn btn--primary btn--large">Button</a>
<a class="btn btn--primary btn--outline btn--large">Button</a>

<a class="btn btn--secondary btn--large">Button</a>
<a class="btn btn--secondary btn--outline btn--large">Button</a>

<a class="btn btn--tertiary btn--large">Button</a>
<a class="btn btn--tertiary btn--outline btn--large">Button</a>

<p>Block</p>

<a class="btn btn--primary btn--block">Button</a>
<a class="btn btn--secondary btn--block">Button</a>
<a class="btn btn--tertiary btn--block">Button</a>