One Sass Color to Rule Them All

SASS-Mixin-for-buttons

//http://www.elijahmanor.com/one-sass-color-to-rule-them-all/

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 
@mixin Button-theme($colorBase, $colorBorder, $colorShadow) {
  background-color: $colorBase;
  background-image: linear-gradient(top, $colorBase 0%, $colorBorder 100%);
  border: 1px solid $colorBorder;
  text-shadow: $colorShadow 0 -1px 1px;
 
  &:hover,
  &:focus {
    background: $colorBorder;
    text-decoration: none;
  }
}
 
%Button {
  border-radius: 5px;
  box-shadow: inset 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .3);
  color: #fff;
  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;
 
  @include Button-theme(#006dcc, #085191, #031b30);
}
 
.Button {
  @extend %Button;
}
 
.Button--success {
  @extend %Button;
 
  @include Button-theme(#5bb75b, #4f904f, #2b4e2b);
}
 
.Button--danger {
  @extend %Button;
 
  @include Button-theme(#da4f49, #bb3a35, #BB3A35);
}