Hey Guys,

I just created a cool Mixin using SCSS for creating custom Bootstrap Buttons.

If you're unfamiliar with bootstrap here it is: http://twitter.github.com/bootstrap/base-css.html#buttons

I love using their framework for our clients, but I also must expand upon it, and most times that involves custom UI elements such as buttons.

I put up the code here on codepen: http://codepen.io/theCSSguru/pen/kcKml

Basically I am using the @each function to run through a list of classes and colors that get appended to a predefined class of .btn- and it spits out every class in that list in the css.

So this:

$buttonColors: primary #005888, info #49AFCD, success #5BB75B, warning #FAA732, danger #DA4F49, inverse #363636;
@each $className in $buttonColors {
  .btn-#{nth($className, 1)} {
    $buttonColor: nth($className, 2);
    @extend %darkTextColor;
    border-bottom: 3px darken($buttonColor, 25%) solid;
    background: $buttonColor;
    &:hover {
      @extend %darkTextColor; 
      background: lighten($buttonColor, 10%);
    }
  }
}

Becomes this:

.btn-primary {
  border-bottom: 3px #000609 solid;
  background: #005888;
}
.btn-primary:hover {
  background: #0079bb;
}

.btn-info {
  border-bottom: 3px #206376 solid;
  background: #49afcd;
}
.btn-info:hover {
  background: #71c1d8;
}

.btn-success {
  border-bottom: 3px #2d662d solid;
  background: #5bb75b;
}
.btn-success:hover {
  background: #7ec77e;
}

.btn-warning {
  border-bottom: 3px #a86404 solid;
  background: #faa732;
}
.btn-warning:hover {
  background: #fbbc64;
}

.btn-danger {
  border-bottom: 3px #88201c solid;
  background: #da4f49;
}
.btn-danger:hover {
  background: #e37873;
}

.btn-inverse {
  border-bottom: 3px black solid;
  background: #363636;
}
.btn-inverse:hover {
  background: #505050;
}

Pretty cool aye? My codepen has gradients for the backgrounds of the buttons, but here in my example I just used simple colors to show it plainly.

So far I've used this on about 4 of my new projects for our clients, makes making custom buttons a breeze!

Hope you like it!