Generated by SassMeister.com.

SassMeister-input-HTML.haml

%button.btn .btn
  
%button.btn.btn--primary btn.btn--secondary

%button.btn.btn--warning btn.btn--warning

%button.btn.btn--danger btn.btn--danger

%button.btn.btn--link btn.btn--link

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// MIXINS
@mixin btn-border($color)
  border: 1px solid darken($color, 10%)
  border-top-color: darken($color, 5%)
  border-bottom-width: 3px
  box-shadow: inset 0 1px 0 lighten($color, 15%)

@mixin mouse_interactions($color)
  &:hover
    background-color: lighten($color, 15%)
  
  &:active
    background-color: darken($color, 15%)
  
@mixin default_button($color)
  +btn-border($color)
  +mouse_interactions($color)
  
  background: $color
  border-radius: 3px

// BTN - BASE RESET
%btn
  border: none
  padding: 10px 20px

// BTN
.btn
  @extend %btn
  +default_button(lightgray)

  &.btn--primary
    +default_button(blue)
    color: white
    
  &.btn--warning
    +default_button(orange)
    
  &.btn--danger
    +default_button(red)
    color: white
    
  &.btn--link
    +default_button(transparent)
    color: blue
    font-weight: bold

SassMeister-output.css

.btn {
  border: none;
  padding: 10px 20px;
}

.btn {
  border: 1px solid #b9b9b9;
  border-top-color: #c6c6c6;
  border-bottom-width: 3px;
  box-shadow: inset 0 1px 0 #f9f9f9;
  background: lightgrey;
  border-radius: 3px;
}
.btn:hover {
  background-color: #f9f9f9;
}
.btn:active {
  background-color: #adadad;
}
.btn.btn--primary {
  border: 1px solid #0000cc;
  border-top-color: #0000e6;
  border-bottom-width: 3px;
  box-shadow: inset 0 1px 0 #4d4dff;
  background: blue;
  border-radius: 3px;
  color: white;
}
.btn.btn--primary:hover {
  background-color: #4d4dff;
}
.btn.btn--primary:active {
  background-color: #0000b3;
}
.btn.btn--warning {
  border: 1px solid #cc8400;
  border-top-color: #e69500;
  border-bottom-width: 3px;
  box-shadow: inset 0 1px 0 #ffc04d;
  background: orange;
  border-radius: 3px;
}
.btn.btn--warning:hover {
  background-color: #ffc04d;
}
.btn.btn--warning:active {
  background-color: #b37300;
}
.btn.btn--danger {
  border: 1px solid #cc0000;
  border-top-color: #e60000;
  border-bottom-width: 3px;
  box-shadow: inset 0 1px 0 #ff4d4d;
  background: red;
  border-radius: 3px;
  color: white;
}
.btn.btn--danger:hover {
  background-color: #ff4d4d;
}
.btn.btn--danger:active {
  background-color: #b30000;
}
.btn.btn--link {
  border: 1px solid transparent;
  border-top-color: transparent;
  border-bottom-width: 3px;
  box-shadow: inset 0 1px 0 rgba(38, 38, 38, 0);
  background: transparent;
  border-radius: 3px;
  color: blue;
  font-weight: bold;
}
.btn.btn--link:hover {
  background-color: rgba(38, 38, 38, 0);
}
.btn.btn--link:active {
  background-color: transparent;
}

SassMeister-rendered.html

<button class='btn'>.btn</button>
<button class='btn btn--primary'>btn.btn--secondary</button>
<button class='btn btn--warning'>btn.btn--warning</button>
<button class='btn btn--danger'>btn.btn--danger</button>
<button class='btn btn--link'>btn.btn--link</button>