Custom Bootstrap Buttons via SCSS

[theCSSguru]

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!

[Author]

Posts