Generated by SassMeister.com.

SassMeister-input-HTML.html

<h2>Small Buttons</h2>

<a href="#" class="btn--default--sm">default</a>
<a href="#" class="btn--primary--sm">primary</a>
<a href="#" class="btn--success--sm">success</a>
<a href="#" class="btn--info--sm">info</a>
<a href="#" class="btn--warn--sm">warn</a>
<a href="#" class="btn--danger--sm">danger</a>

<h2>Medium Buttons</h2>

<a href="#" class="btn--default--med">default</a>
<a href="#" class="btn--primary--med">primary</a>
<a href="#" class="btn--success--med">success</a>
<a href="#" class="btn--info--med">info</a>
<a href="#" class="btn--warn--med">warn</a>
<a href="#" class="btn--danger--med">danger</a>

<h2>Large Buttons</h2>

<a href="#" class="btn--default--lrg">default</a>
<a href="#" class="btn--primary--lrg">primary</a>
<a href="#" class="btn--success--lrg">success</a>
<a href="#" class="btn--info--lrg">info</a>
<a href="#" class="btn--warn--lrg">warn</a>
<a href="#" class="btn--danger--lrg">danger</a>

<h2>Extra-Large Buttons</h2>

<a href="#" class="btn--default--xl">default</a>
<a href="#" class="btn--primary--xl">primary</a>
<a href="#" class="btn--success--xl">success</a>
<a href="#" class="btn--info--xl">info</a>
<a href="#" class="btn--warn--xl">warn</a>
<a href="#" class="btn--danger--xl">danger</a>

<h2>Alternate Button Styles</h2>

<a href="#" class="btn--secondary--xl">pill shapes are nice</a>
<a href="#" class="btn--square--med">multicolored buttons!</a>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@import "compass/css3";

// determine rem value for functions
$rem-base: 16;

// rem Function
@function rem($px: $rem-base) {
    @return ($px/$rem-base)+rem;
}

// Button Size Map 
$btn-size-map: (
  sm : 16,
  med : 20,
  lrg : 24, 
  xl: 36
);
$secondary-color: #9eda67;

// colors
$default: #9F9F9F;
$primary: #6fe6b3;
$success: #57E521;
$info: #77b8e6;
$warn: #f97429;
$danger: #d52d31;


@mixin btn ($class, $color, $extender: btn, $weight: normal, $text-color: $color, $bg-color: $color,  $border-color: $color, $border-size: 1px, $float: null, $display: inline-block, $hover-text: null, $text-decoration: none, $text-transform: null, $radius: 0) {
  %#{$extender} {
    box-sizing: border-box;
    text-decoration: $text-decoration;
      &:hover, &:active {
        text-decoration: $text-decoration;
    }
  }
  
  %#{$extender}--#{$class} {
      border: $border-size solid;
      border-color: $border-color;
      @if $radius == pill, rem-auto { }
      @else if $radius != pill, rem-auto {
        border-radius: $radius;
        border-radius: rem($radius);
      }
      color: $text-color;
      font-family: sans-serif;
      display: $display;
      font-weight: $weight;
      text-transform: $text-transform;
        @if $float == right, left {
          float: $float;
          clear: both; }
        @else if $display == block, block, inline-block {
          display: $display;
          position: relative; }
      @include transition(background-color, .3s);
      &:hover {
          border-color: darken($border-color , 10%);
          background-color: lighten($bg-color, 25%);
          color: darken($text-color , 10%);
          @include transition(background-color, .3s);
      }
      &:active {
          border-color: darken( $text-color , 15% );
      }
  }
  
  @each $btn-size, $btn-font-size in $btn-size-map {
    %#{$extender}--#{$btn-size}, {
        @extend %#{$extender};
        font-size: $btn-font-size + px;
        font-size: rem($btn-font-size);
        padding: ($btn-font-size*.5) + px ($btn-font-size*.75) + px;
        padding: rem(($btn-font-size*.5)) rem(($btn-font-size*.75));
        margin-top: ($btn-font-size*.5) + px;
        margin-top: rem(($btn-font-size*.5));
        
    }
    .#{$extender}--#{$class}--#{$btn-size} {
        @extend %#{$extender}--#{$btn-size}, %#{$extender}--#{$class};
        @if $radius == pill {
          border-radius: $btn-font-size;
          border-radius: rem($btn-font-size);
        } @else if $radius == rem-auto {
          border-radius: $btn-font-size*.3;
          border-radius: rem($btn-font-size*.3);
        }
        @else { }
    }
  }
}

// button styles

@include btn(default, $default, $radius: rem-auto, $border-size: 2px);
@include btn(primary, $primary, $radius: rem-auto, $border-size: 2px);
@include btn(info, $info, $radius: rem-auto, $border-size: 2px);
@include btn(success, $success, $radius: rem-auto, $border-size: 2px);
@include btn(warn, $warn, $radius: rem-auto, $border-size: 2px);
@include btn(danger, $danger, $radius: rem-auto, $border-size: 2px);

@include btn(secondary, $secondary-color, $radius: pill, $border-size: 2px);

@include btn(square, $primary, $bg-color: #4ef032, $border-size: 2px, $text-transform: uppercase);

h2 {
  color: $default;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: rem(2);
  font-weight: 200;
  margin-top: rem(30);
  margin-bottom: 0;
}

SassMeister-output.css

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm, .btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med, .btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg, .btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  box-sizing: border-box;
  text-decoration: none;
}
.btn--default--sm:hover, .btn--primary--sm:hover, .btn--info--sm:hover, .btn--success--sm:hover, .btn--warn--sm:hover, .btn--danger--sm:hover, .btn--secondary--sm:hover, .btn--square--sm:hover, .btn--default--med:hover, .btn--primary--med:hover, .btn--info--med:hover, .btn--success--med:hover, .btn--warn--med:hover, .btn--danger--med:hover, .btn--secondary--med:hover, .btn--square--med:hover, .btn--default--lrg:hover, .btn--primary--lrg:hover, .btn--info--lrg:hover, .btn--success--lrg:hover, .btn--warn--lrg:hover, .btn--danger--lrg:hover, .btn--secondary--lrg:hover, .btn--square--lrg:hover, .btn--default--xl:hover, .btn--primary--xl:hover, .btn--info--xl:hover, .btn--success--xl:hover, .btn--warn--xl:hover, .btn--danger--xl:hover, .btn--secondary--xl:hover, .btn--square--xl:hover, .btn--default--sm:active, .btn--primary--sm:active, .btn--info--sm:active, .btn--success--sm:active, .btn--warn--sm:active, .btn--danger--sm:active, .btn--secondary--sm:active, .btn--square--sm:active, .btn--default--med:active, .btn--primary--med:active, .btn--info--med:active, .btn--success--med:active, .btn--warn--med:active, .btn--danger--med:active, .btn--secondary--med:active, .btn--square--med:active, .btn--default--lrg:active, .btn--primary--lrg:active, .btn--info--lrg:active, .btn--success--lrg:active, .btn--warn--lrg:active, .btn--danger--lrg:active, .btn--secondary--lrg:active, .btn--square--lrg:active, .btn--default--xl:active, .btn--primary--xl:active, .btn--info--xl:active, .btn--success--xl:active, .btn--warn--xl:active, .btn--danger--xl:active, .btn--secondary--xl:active, .btn--square--xl:active {
  text-decoration: none;
}

.btn--default--sm, .btn--default--med, .btn--default--lrg, .btn--default--xl {
  border: 2px solid;
  border-color: #9F9F9F;
  color: #9F9F9F;
  font-family: sans-serif;
  display: inline-block;
  font-weight: normal;
  clear: both;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--default--sm:hover, .btn--default--med:hover, .btn--default--lrg:hover, .btn--default--xl:hover {
  border-color: #868686;
  background-color: #dfdfdf;
  color: #868686;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--default--sm:active, .btn--default--med:active, .btn--default--lrg:active, .btn--default--xl:active {
  border-color: #797979;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
  margin-top: 8px;
  margin-top: 0.5rem;
}

.btn--default--sm {
  border-radius: 4.8;
  border-radius: 0.3rem;
}

.btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med {
  font-size: 20px;
  font-size: 1.25rem;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  margin-top: 10px;
  margin-top: 0.625rem;
}

.btn--default--med {
  border-radius: 6;
  border-radius: 0.375rem;
}

.btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg {
  font-size: 24px;
  font-size: 1.5rem;
  padding: 12px 18px;
  padding: 0.75rem 1.125rem;
  margin-top: 12px;
  margin-top: 0.75rem;
}

.btn--default--lrg {
  border-radius: 7.2;
  border-radius: 0.45rem;
}

.btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  font-size: 36px;
  font-size: 2.25rem;
  padding: 18px 27px;
  padding: 1.125rem 1.6875rem;
  margin-top: 18px;
  margin-top: 1.125rem;
}

.btn--default--xl {
  border-radius: 10.8;
  border-radius: 0.675rem;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm, .btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med, .btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg, .btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  box-sizing: border-box;
  text-decoration: none;
}
.btn--default--sm:hover, .btn--primary--sm:hover, .btn--info--sm:hover, .btn--success--sm:hover, .btn--warn--sm:hover, .btn--danger--sm:hover, .btn--secondary--sm:hover, .btn--square--sm:hover, .btn--default--med:hover, .btn--primary--med:hover, .btn--info--med:hover, .btn--success--med:hover, .btn--warn--med:hover, .btn--danger--med:hover, .btn--secondary--med:hover, .btn--square--med:hover, .btn--default--lrg:hover, .btn--primary--lrg:hover, .btn--info--lrg:hover, .btn--success--lrg:hover, .btn--warn--lrg:hover, .btn--danger--lrg:hover, .btn--secondary--lrg:hover, .btn--square--lrg:hover, .btn--default--xl:hover, .btn--primary--xl:hover, .btn--info--xl:hover, .btn--success--xl:hover, .btn--warn--xl:hover, .btn--danger--xl:hover, .btn--secondary--xl:hover, .btn--square--xl:hover, .btn--default--sm:active, .btn--primary--sm:active, .btn--info--sm:active, .btn--success--sm:active, .btn--warn--sm:active, .btn--danger--sm:active, .btn--secondary--sm:active, .btn--square--sm:active, .btn--default--med:active, .btn--primary--med:active, .btn--info--med:active, .btn--success--med:active, .btn--warn--med:active, .btn--danger--med:active, .btn--secondary--med:active, .btn--square--med:active, .btn--default--lrg:active, .btn--primary--lrg:active, .btn--info--lrg:active, .btn--success--lrg:active, .btn--warn--lrg:active, .btn--danger--lrg:active, .btn--secondary--lrg:active, .btn--square--lrg:active, .btn--default--xl:active, .btn--primary--xl:active, .btn--info--xl:active, .btn--success--xl:active, .btn--warn--xl:active, .btn--danger--xl:active, .btn--secondary--xl:active, .btn--square--xl:active {
  text-decoration: none;
}

.btn--primary--sm, .btn--primary--med, .btn--primary--lrg, .btn--primary--xl {
  border: 2px solid;
  border-color: #6fe6b3;
  color: #6fe6b3;
  font-family: sans-serif;
  display: inline-block;
  font-weight: normal;
  clear: both;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--primary--sm:hover, .btn--primary--med:hover, .btn--primary--lrg:hover, .btn--primary--xl:hover {
  border-color: #44de9c;
  background-color: #dcf9ec;
  color: #44de9c;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--primary--sm:active, .btn--primary--med:active, .btn--primary--lrg:active, .btn--primary--xl:active {
  border-color: #2edb91;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
  margin-top: 8px;
  margin-top: 0.5rem;
}

.btn--primary--sm {
  border-radius: 4.8;
  border-radius: 0.3rem;
}

.btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med {
  font-size: 20px;
  font-size: 1.25rem;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  margin-top: 10px;
  margin-top: 0.625rem;
}

.btn--primary--med {
  border-radius: 6;
  border-radius: 0.375rem;
}

.btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg {
  font-size: 24px;
  font-size: 1.5rem;
  padding: 12px 18px;
  padding: 0.75rem 1.125rem;
  margin-top: 12px;
  margin-top: 0.75rem;
}

.btn--primary--lrg {
  border-radius: 7.2;
  border-radius: 0.45rem;
}

.btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  font-size: 36px;
  font-size: 2.25rem;
  padding: 18px 27px;
  padding: 1.125rem 1.6875rem;
  margin-top: 18px;
  margin-top: 1.125rem;
}

.btn--primary--xl {
  border-radius: 10.8;
  border-radius: 0.675rem;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm, .btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med, .btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg, .btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  box-sizing: border-box;
  text-decoration: none;
}
.btn--default--sm:hover, .btn--primary--sm:hover, .btn--info--sm:hover, .btn--success--sm:hover, .btn--warn--sm:hover, .btn--danger--sm:hover, .btn--secondary--sm:hover, .btn--square--sm:hover, .btn--default--med:hover, .btn--primary--med:hover, .btn--info--med:hover, .btn--success--med:hover, .btn--warn--med:hover, .btn--danger--med:hover, .btn--secondary--med:hover, .btn--square--med:hover, .btn--default--lrg:hover, .btn--primary--lrg:hover, .btn--info--lrg:hover, .btn--success--lrg:hover, .btn--warn--lrg:hover, .btn--danger--lrg:hover, .btn--secondary--lrg:hover, .btn--square--lrg:hover, .btn--default--xl:hover, .btn--primary--xl:hover, .btn--info--xl:hover, .btn--success--xl:hover, .btn--warn--xl:hover, .btn--danger--xl:hover, .btn--secondary--xl:hover, .btn--square--xl:hover, .btn--default--sm:active, .btn--primary--sm:active, .btn--info--sm:active, .btn--success--sm:active, .btn--warn--sm:active, .btn--danger--sm:active, .btn--secondary--sm:active, .btn--square--sm:active, .btn--default--med:active, .btn--primary--med:active, .btn--info--med:active, .btn--success--med:active, .btn--warn--med:active, .btn--danger--med:active, .btn--secondary--med:active, .btn--square--med:active, .btn--default--lrg:active, .btn--primary--lrg:active, .btn--info--lrg:active, .btn--success--lrg:active, .btn--warn--lrg:active, .btn--danger--lrg:active, .btn--secondary--lrg:active, .btn--square--lrg:active, .btn--default--xl:active, .btn--primary--xl:active, .btn--info--xl:active, .btn--success--xl:active, .btn--warn--xl:active, .btn--danger--xl:active, .btn--secondary--xl:active, .btn--square--xl:active {
  text-decoration: none;
}

.btn--info--sm, .btn--info--med, .btn--info--lrg, .btn--info--xl {
  border: 2px solid;
  border-color: #77b8e6;
  color: #77b8e6;
  font-family: sans-serif;
  display: inline-block;
  font-weight: normal;
  clear: both;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--info--sm:hover, .btn--info--med:hover, .btn--info--lrg:hover, .btn--info--xl:hover {
  border-color: #4ca2de;
  background-color: #e3f0fa;
  color: #4ca2de;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--info--sm:active, .btn--info--med:active, .btn--info--lrg:active, .btn--info--xl:active {
  border-color: #3696da;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
  margin-top: 8px;
  margin-top: 0.5rem;
}

.btn--info--sm {
  border-radius: 4.8;
  border-radius: 0.3rem;
}

.btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med {
  font-size: 20px;
  font-size: 1.25rem;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  margin-top: 10px;
  margin-top: 0.625rem;
}

.btn--info--med {
  border-radius: 6;
  border-radius: 0.375rem;
}

.btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg {
  font-size: 24px;
  font-size: 1.5rem;
  padding: 12px 18px;
  padding: 0.75rem 1.125rem;
  margin-top: 12px;
  margin-top: 0.75rem;
}

.btn--info--lrg {
  border-radius: 7.2;
  border-radius: 0.45rem;
}

.btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  font-size: 36px;
  font-size: 2.25rem;
  padding: 18px 27px;
  padding: 1.125rem 1.6875rem;
  margin-top: 18px;
  margin-top: 1.125rem;
}

.btn--info--xl {
  border-radius: 10.8;
  border-radius: 0.675rem;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm, .btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med, .btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg, .btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  box-sizing: border-box;
  text-decoration: none;
}
.btn--default--sm:hover, .btn--primary--sm:hover, .btn--info--sm:hover, .btn--success--sm:hover, .btn--warn--sm:hover, .btn--danger--sm:hover, .btn--secondary--sm:hover, .btn--square--sm:hover, .btn--default--med:hover, .btn--primary--med:hover, .btn--info--med:hover, .btn--success--med:hover, .btn--warn--med:hover, .btn--danger--med:hover, .btn--secondary--med:hover, .btn--square--med:hover, .btn--default--lrg:hover, .btn--primary--lrg:hover, .btn--info--lrg:hover, .btn--success--lrg:hover, .btn--warn--lrg:hover, .btn--danger--lrg:hover, .btn--secondary--lrg:hover, .btn--square--lrg:hover, .btn--default--xl:hover, .btn--primary--xl:hover, .btn--info--xl:hover, .btn--success--xl:hover, .btn--warn--xl:hover, .btn--danger--xl:hover, .btn--secondary--xl:hover, .btn--square--xl:hover, .btn--default--sm:active, .btn--primary--sm:active, .btn--info--sm:active, .btn--success--sm:active, .btn--warn--sm:active, .btn--danger--sm:active, .btn--secondary--sm:active, .btn--square--sm:active, .btn--default--med:active, .btn--primary--med:active, .btn--info--med:active, .btn--success--med:active, .btn--warn--med:active, .btn--danger--med:active, .btn--secondary--med:active, .btn--square--med:active, .btn--default--lrg:active, .btn--primary--lrg:active, .btn--info--lrg:active, .btn--success--lrg:active, .btn--warn--lrg:active, .btn--danger--lrg:active, .btn--secondary--lrg:active, .btn--square--lrg:active, .btn--default--xl:active, .btn--primary--xl:active, .btn--info--xl:active, .btn--success--xl:active, .btn--warn--xl:active, .btn--danger--xl:active, .btn--secondary--xl:active, .btn--square--xl:active {
  text-decoration: none;
}

.btn--success--sm, .btn--success--med, .btn--success--lrg, .btn--success--xl {
  border: 2px solid;
  border-color: #57E521;
  color: #57E521;
  font-family: sans-serif;
  display: inline-block;
  font-weight: normal;
  clear: both;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--success--sm:hover, .btn--success--med:hover, .btn--success--lrg:hover, .btn--success--xl:hover {
  border-color: #44bd16;
  background-color: #adf293;
  color: #44bd16;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--success--sm:active, .btn--success--med:active, .btn--success--lrg:active, .btn--success--xl:active {
  border-color: #3ca613;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
  margin-top: 8px;
  margin-top: 0.5rem;
}

.btn--success--sm {
  border-radius: 4.8;
  border-radius: 0.3rem;
}

.btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med {
  font-size: 20px;
  font-size: 1.25rem;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  margin-top: 10px;
  margin-top: 0.625rem;
}

.btn--success--med {
  border-radius: 6;
  border-radius: 0.375rem;
}

.btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg {
  font-size: 24px;
  font-size: 1.5rem;
  padding: 12px 18px;
  padding: 0.75rem 1.125rem;
  margin-top: 12px;
  margin-top: 0.75rem;
}

.btn--success--lrg {
  border-radius: 7.2;
  border-radius: 0.45rem;
}

.btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  font-size: 36px;
  font-size: 2.25rem;
  padding: 18px 27px;
  padding: 1.125rem 1.6875rem;
  margin-top: 18px;
  margin-top: 1.125rem;
}

.btn--success--xl {
  border-radius: 10.8;
  border-radius: 0.675rem;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm, .btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med, .btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg, .btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  box-sizing: border-box;
  text-decoration: none;
}
.btn--default--sm:hover, .btn--primary--sm:hover, .btn--info--sm:hover, .btn--success--sm:hover, .btn--warn--sm:hover, .btn--danger--sm:hover, .btn--secondary--sm:hover, .btn--square--sm:hover, .btn--default--med:hover, .btn--primary--med:hover, .btn--info--med:hover, .btn--success--med:hover, .btn--warn--med:hover, .btn--danger--med:hover, .btn--secondary--med:hover, .btn--square--med:hover, .btn--default--lrg:hover, .btn--primary--lrg:hover, .btn--info--lrg:hover, .btn--success--lrg:hover, .btn--warn--lrg:hover, .btn--danger--lrg:hover, .btn--secondary--lrg:hover, .btn--square--lrg:hover, .btn--default--xl:hover, .btn--primary--xl:hover, .btn--info--xl:hover, .btn--success--xl:hover, .btn--warn--xl:hover, .btn--danger--xl:hover, .btn--secondary--xl:hover, .btn--square--xl:hover, .btn--default--sm:active, .btn--primary--sm:active, .btn--info--sm:active, .btn--success--sm:active, .btn--warn--sm:active, .btn--danger--sm:active, .btn--secondary--sm:active, .btn--square--sm:active, .btn--default--med:active, .btn--primary--med:active, .btn--info--med:active, .btn--success--med:active, .btn--warn--med:active, .btn--danger--med:active, .btn--secondary--med:active, .btn--square--med:active, .btn--default--lrg:active, .btn--primary--lrg:active, .btn--info--lrg:active, .btn--success--lrg:active, .btn--warn--lrg:active, .btn--danger--lrg:active, .btn--secondary--lrg:active, .btn--square--lrg:active, .btn--default--xl:active, .btn--primary--xl:active, .btn--info--xl:active, .btn--success--xl:active, .btn--warn--xl:active, .btn--danger--xl:active, .btn--secondary--xl:active, .btn--square--xl:active {
  text-decoration: none;
}

.btn--warn--sm, .btn--warn--med, .btn--warn--lrg, .btn--warn--xl {
  border: 2px solid;
  border-color: #f97429;
  color: #f97429;
  font-family: sans-serif;
  display: inline-block;
  font-weight: normal;
  clear: both;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--warn--sm:hover, .btn--warn--med:hover, .btn--warn--lrg:hover, .btn--warn--xl:hover {
  border-color: #e85807;
  background-color: #fcc5a5;
  color: #e85807;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--warn--sm:active, .btn--warn--med:active, .btn--warn--lrg:active, .btn--warn--xl:active {
  border-color: #d04f06;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
  margin-top: 8px;
  margin-top: 0.5rem;
}

.btn--warn--sm {
  border-radius: 4.8;
  border-radius: 0.3rem;
}

.btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med {
  font-size: 20px;
  font-size: 1.25rem;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  margin-top: 10px;
  margin-top: 0.625rem;
}

.btn--warn--med {
  border-radius: 6;
  border-radius: 0.375rem;
}

.btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg {
  font-size: 24px;
  font-size: 1.5rem;
  padding: 12px 18px;
  padding: 0.75rem 1.125rem;
  margin-top: 12px;
  margin-top: 0.75rem;
}

.btn--warn--lrg {
  border-radius: 7.2;
  border-radius: 0.45rem;
}

.btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  font-size: 36px;
  font-size: 2.25rem;
  padding: 18px 27px;
  padding: 1.125rem 1.6875rem;
  margin-top: 18px;
  margin-top: 1.125rem;
}

.btn--warn--xl {
  border-radius: 10.8;
  border-radius: 0.675rem;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm, .btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med, .btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg, .btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  box-sizing: border-box;
  text-decoration: none;
}
.btn--default--sm:hover, .btn--primary--sm:hover, .btn--info--sm:hover, .btn--success--sm:hover, .btn--warn--sm:hover, .btn--danger--sm:hover, .btn--secondary--sm:hover, .btn--square--sm:hover, .btn--default--med:hover, .btn--primary--med:hover, .btn--info--med:hover, .btn--success--med:hover, .btn--warn--med:hover, .btn--danger--med:hover, .btn--secondary--med:hover, .btn--square--med:hover, .btn--default--lrg:hover, .btn--primary--lrg:hover, .btn--info--lrg:hover, .btn--success--lrg:hover, .btn--warn--lrg:hover, .btn--danger--lrg:hover, .btn--secondary--lrg:hover, .btn--square--lrg:hover, .btn--default--xl:hover, .btn--primary--xl:hover, .btn--info--xl:hover, .btn--success--xl:hover, .btn--warn--xl:hover, .btn--danger--xl:hover, .btn--secondary--xl:hover, .btn--square--xl:hover, .btn--default--sm:active, .btn--primary--sm:active, .btn--info--sm:active, .btn--success--sm:active, .btn--warn--sm:active, .btn--danger--sm:active, .btn--secondary--sm:active, .btn--square--sm:active, .btn--default--med:active, .btn--primary--med:active, .btn--info--med:active, .btn--success--med:active, .btn--warn--med:active, .btn--danger--med:active, .btn--secondary--med:active, .btn--square--med:active, .btn--default--lrg:active, .btn--primary--lrg:active, .btn--info--lrg:active, .btn--success--lrg:active, .btn--warn--lrg:active, .btn--danger--lrg:active, .btn--secondary--lrg:active, .btn--square--lrg:active, .btn--default--xl:active, .btn--primary--xl:active, .btn--info--xl:active, .btn--success--xl:active, .btn--warn--xl:active, .btn--danger--xl:active, .btn--secondary--xl:active, .btn--square--xl:active {
  text-decoration: none;
}

.btn--danger--sm, .btn--danger--med, .btn--danger--lrg, .btn--danger--xl {
  border: 2px solid;
  border-color: #d52d31;
  color: #d52d31;
  font-family: sans-serif;
  display: inline-block;
  font-weight: normal;
  clear: both;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--danger--sm:hover, .btn--danger--med:hover, .btn--danger--lrg:hover, .btn--danger--xl:hover {
  border-color: #ac2326;
  background-color: #ea9799;
  color: #ac2326;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--danger--sm:active, .btn--danger--med:active, .btn--danger--lrg:active, .btn--danger--xl:active {
  border-color: #971e21;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
  margin-top: 8px;
  margin-top: 0.5rem;
}

.btn--danger--sm {
  border-radius: 4.8;
  border-radius: 0.3rem;
}

.btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med {
  font-size: 20px;
  font-size: 1.25rem;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  margin-top: 10px;
  margin-top: 0.625rem;
}

.btn--danger--med {
  border-radius: 6;
  border-radius: 0.375rem;
}

.btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg {
  font-size: 24px;
  font-size: 1.5rem;
  padding: 12px 18px;
  padding: 0.75rem 1.125rem;
  margin-top: 12px;
  margin-top: 0.75rem;
}

.btn--danger--lrg {
  border-radius: 7.2;
  border-radius: 0.45rem;
}

.btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  font-size: 36px;
  font-size: 2.25rem;
  padding: 18px 27px;
  padding: 1.125rem 1.6875rem;
  margin-top: 18px;
  margin-top: 1.125rem;
}

.btn--danger--xl {
  border-radius: 10.8;
  border-radius: 0.675rem;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm, .btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med, .btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg, .btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  box-sizing: border-box;
  text-decoration: none;
}
.btn--default--sm:hover, .btn--primary--sm:hover, .btn--info--sm:hover, .btn--success--sm:hover, .btn--warn--sm:hover, .btn--danger--sm:hover, .btn--secondary--sm:hover, .btn--square--sm:hover, .btn--default--med:hover, .btn--primary--med:hover, .btn--info--med:hover, .btn--success--med:hover, .btn--warn--med:hover, .btn--danger--med:hover, .btn--secondary--med:hover, .btn--square--med:hover, .btn--default--lrg:hover, .btn--primary--lrg:hover, .btn--info--lrg:hover, .btn--success--lrg:hover, .btn--warn--lrg:hover, .btn--danger--lrg:hover, .btn--secondary--lrg:hover, .btn--square--lrg:hover, .btn--default--xl:hover, .btn--primary--xl:hover, .btn--info--xl:hover, .btn--success--xl:hover, .btn--warn--xl:hover, .btn--danger--xl:hover, .btn--secondary--xl:hover, .btn--square--xl:hover, .btn--default--sm:active, .btn--primary--sm:active, .btn--info--sm:active, .btn--success--sm:active, .btn--warn--sm:active, .btn--danger--sm:active, .btn--secondary--sm:active, .btn--square--sm:active, .btn--default--med:active, .btn--primary--med:active, .btn--info--med:active, .btn--success--med:active, .btn--warn--med:active, .btn--danger--med:active, .btn--secondary--med:active, .btn--square--med:active, .btn--default--lrg:active, .btn--primary--lrg:active, .btn--info--lrg:active, .btn--success--lrg:active, .btn--warn--lrg:active, .btn--danger--lrg:active, .btn--secondary--lrg:active, .btn--square--lrg:active, .btn--default--xl:active, .btn--primary--xl:active, .btn--info--xl:active, .btn--success--xl:active, .btn--warn--xl:active, .btn--danger--xl:active, .btn--secondary--xl:active, .btn--square--xl:active {
  text-decoration: none;
}

.btn--secondary--sm, .btn--secondary--med, .btn--secondary--lrg, .btn--secondary--xl {
  border: 2px solid;
  border-color: #9eda67;
  color: #9eda67;
  font-family: sans-serif;
  display: inline-block;
  font-weight: normal;
  clear: both;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--secondary--sm:hover, .btn--secondary--med:hover, .btn--secondary--lrg:hover, .btn--secondary--xl:hover {
  border-color: #84d03e;
  background-color: #dff3ce;
  color: #84d03e;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--secondary--sm:active, .btn--secondary--med:active, .btn--secondary--lrg:active, .btn--secondary--xl:active {
  border-color: #77c530;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
  margin-top: 8px;
  margin-top: 0.5rem;
}

.btn--secondary--sm {
  border-radius: 16;
  border-radius: 1rem;
}

.btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med {
  font-size: 20px;
  font-size: 1.25rem;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  margin-top: 10px;
  margin-top: 0.625rem;
}

.btn--secondary--med {
  border-radius: 20;
  border-radius: 1.25rem;
}

.btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg {
  font-size: 24px;
  font-size: 1.5rem;
  padding: 12px 18px;
  padding: 0.75rem 1.125rem;
  margin-top: 12px;
  margin-top: 0.75rem;
}

.btn--secondary--lrg {
  border-radius: 24;
  border-radius: 1.5rem;
}

.btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  font-size: 36px;
  font-size: 2.25rem;
  padding: 18px 27px;
  padding: 1.125rem 1.6875rem;
  margin-top: 18px;
  margin-top: 1.125rem;
}

.btn--secondary--xl {
  border-radius: 36;
  border-radius: 2.25rem;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm, .btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med, .btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg, .btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  box-sizing: border-box;
  text-decoration: none;
}
.btn--default--sm:hover, .btn--primary--sm:hover, .btn--info--sm:hover, .btn--success--sm:hover, .btn--warn--sm:hover, .btn--danger--sm:hover, .btn--secondary--sm:hover, .btn--square--sm:hover, .btn--default--med:hover, .btn--primary--med:hover, .btn--info--med:hover, .btn--success--med:hover, .btn--warn--med:hover, .btn--danger--med:hover, .btn--secondary--med:hover, .btn--square--med:hover, .btn--default--lrg:hover, .btn--primary--lrg:hover, .btn--info--lrg:hover, .btn--success--lrg:hover, .btn--warn--lrg:hover, .btn--danger--lrg:hover, .btn--secondary--lrg:hover, .btn--square--lrg:hover, .btn--default--xl:hover, .btn--primary--xl:hover, .btn--info--xl:hover, .btn--success--xl:hover, .btn--warn--xl:hover, .btn--danger--xl:hover, .btn--secondary--xl:hover, .btn--square--xl:hover, .btn--default--sm:active, .btn--primary--sm:active, .btn--info--sm:active, .btn--success--sm:active, .btn--warn--sm:active, .btn--danger--sm:active, .btn--secondary--sm:active, .btn--square--sm:active, .btn--default--med:active, .btn--primary--med:active, .btn--info--med:active, .btn--success--med:active, .btn--warn--med:active, .btn--danger--med:active, .btn--secondary--med:active, .btn--square--med:active, .btn--default--lrg:active, .btn--primary--lrg:active, .btn--info--lrg:active, .btn--success--lrg:active, .btn--warn--lrg:active, .btn--danger--lrg:active, .btn--secondary--lrg:active, .btn--square--lrg:active, .btn--default--xl:active, .btn--primary--xl:active, .btn--info--xl:active, .btn--success--xl:active, .btn--warn--xl:active, .btn--danger--xl:active, .btn--secondary--xl:active, .btn--square--xl:active {
  text-decoration: none;
}

.btn--square--sm, .btn--square--med, .btn--square--lrg, .btn--square--xl {
  border: 2px solid;
  border-color: #6fe6b3;
  color: #6fe6b3;
  font-family: sans-serif;
  display: inline-block;
  font-weight: normal;
  text-transform: uppercase;
  clear: both;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--square--sm:hover, .btn--square--med:hover, .btn--square--lrg:hover, .btn--square--xl:hover {
  border-color: #44de9c;
  background-color: #b5f9a9;
  color: #44de9c;
  -moz-transition: background-color, 0.3s;
  -o-transition: background-color, 0.3s;
  -webkit-transition: background-color, 0.3s;
  transition: background-color, 0.3s;
}
.btn--square--sm:active, .btn--square--med:active, .btn--square--lrg:active, .btn--square--xl:active {
  border-color: #2edb91;
}

.btn--default--sm, .btn--primary--sm, .btn--info--sm, .btn--success--sm, .btn--warn--sm, .btn--danger--sm, .btn--secondary--sm, .btn--square--sm {
  font-size: 16px;
  font-size: 1rem;
  padding: 8px 12px;
  padding: 0.5rem 0.75rem;
  margin-top: 8px;
  margin-top: 0.5rem;
}

.btn--default--med, .btn--primary--med, .btn--info--med, .btn--success--med, .btn--warn--med, .btn--danger--med, .btn--secondary--med, .btn--square--med {
  font-size: 20px;
  font-size: 1.25rem;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  margin-top: 10px;
  margin-top: 0.625rem;
}

.btn--default--lrg, .btn--primary--lrg, .btn--info--lrg, .btn--success--lrg, .btn--warn--lrg, .btn--danger--lrg, .btn--secondary--lrg, .btn--square--lrg {
  font-size: 24px;
  font-size: 1.5rem;
  padding: 12px 18px;
  padding: 0.75rem 1.125rem;
  margin-top: 12px;
  margin-top: 0.75rem;
}

.btn--default--xl, .btn--primary--xl, .btn--info--xl, .btn--success--xl, .btn--warn--xl, .btn--danger--xl, .btn--secondary--xl, .btn--square--xl {
  font-size: 36px;
  font-size: 2.25rem;
  padding: 18px 27px;
  padding: 1.125rem 1.6875rem;
  margin-top: 18px;
  margin-top: 1.125rem;
}

h2 {
  color: #9F9F9F;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.125rem;
  font-weight: 200;
  margin-top: 1.875rem;
  margin-bottom: 0;
}

SassMeister-rendered.html

<h2>Small Buttons</h2>

<a href="#" class="btn--default--sm">default</a>
<a href="#" class="btn--primary--sm">primary</a>
<a href="#" class="btn--success--sm">success</a>
<a href="#" class="btn--info--sm">info</a>
<a href="#" class="btn--warn--sm">warn</a>
<a href="#" class="btn--danger--sm">danger</a>

<h2>Medium Buttons</h2>

<a href="#" class="btn--default--med">default</a>
<a href="#" class="btn--primary--med">primary</a>
<a href="#" class="btn--success--med">success</a>
<a href="#" class="btn--info--med">info</a>
<a href="#" class="btn--warn--med">warn</a>
<a href="#" class="btn--danger--med">danger</a>

<h2>Large Buttons</h2>

<a href="#" class="btn--default--lrg">default</a>
<a href="#" class="btn--primary--lrg">primary</a>
<a href="#" class="btn--success--lrg">success</a>
<a href="#" class="btn--info--lrg">info</a>
<a href="#" class="btn--warn--lrg">warn</a>
<a href="#" class="btn--danger--lrg">danger</a>

<h2>Extra-Large Buttons</h2>

<a href="#" class="btn--default--xl">default</a>
<a href="#" class="btn--primary--xl">primary</a>
<a href="#" class="btn--success--xl">success</a>
<a href="#" class="btn--info--xl">info</a>
<a href="#" class="btn--warn--xl">warn</a>
<a href="#" class="btn--danger--xl">danger</a>

<h2>Alternate Button Styles</h2>

<a href="#" class="btn--secondary--xl">pill shapes are nice</a>
<a href="#" class="btn--square--med">multicolored buttons!</a>