Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

$color-primary: #006dcc;
$color-success: #5bb75b;
$color-danger: #da4f49;
$color-white: white;

@mixin Button-theme($color, $offset: 10) {
  $colorDarker: darken(desaturate($color, $offset), $offset);

  background-color: $color;
  background-image: linear-gradient(top, $color 0%, $colorDarker 100%);
  border: 1px solid $colorDarker;
  text-shadow: darken($colorDarker, $offset * 2) 0 -1px 1px;

  &:hover,
  &:focus {
    background: $colorDarker;
    text-decoration: none;
  }
}

%Button {
  border-radius: 5px;
  box-shadow: inset 0 0 1px $color-white, 0 1px 2px rgba(0, 0, 0, .3);
  color: $color-white;
  cursor: pointer;
  display: inline-block;
  height: scut-em(40, 16);
  text-align: center;
  text-decoration: none;  
  font-family: 'Open Sans', sans-serif; 
  font-weight: 700;
  line-height: 40px;
  padding: 0 15px;
}

.Button {
  @extend %Button;
  @include Button-theme($color-primary);
}

.Button--success {
  @extend %Button;
  @include Button-theme($color-success);
}

.Button--danger {
  @extend %Button;
  @include Button-theme($color-danger);
}

SassMeister-output.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.Button, .Button--success, .Button--danger {
  border-radius: 5px;
  box-shadow: inset 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
  cursor: pointer;
  display: inline-block;
  height: scut-em(40, 16);
  text-align: center;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  line-height: 40px;
  padding: 0 15px;
}

.Button {
  background-color: #006dcc;
  background-image: linear-gradient(top, #006dcc 0%, #085191 100%);
  border: 1px solid #085191;
  text-shadow: #031b30 0 -1px 1px;
}
.Button:hover, .Button:focus {
  background: #085191;
  text-decoration: none;
}

.Button--success {
  background-color: #5bb75b;
  background-image: linear-gradient(top, #5bb75b 0%, #4f904f 100%);
  border: 1px solid #4f904f;
  text-shadow: #2b4e2b 0 -1px 1px;
}
.Button--success:hover, .Button--success:focus {
  background: #4f904f;
  text-decoration: none;
}

.Button--danger {
  background-color: #da4f49;
  background-image: linear-gradient(top, #da4f49 0%, #bb3a35 100%);
  border: 1px solid #bb3a35;
  text-shadow: #6c211e 0 -1px 1px;
}
.Button--danger:hover, .Button--danger:focus {
  background: #bb3a35;
  text-decoration: none;
}