Grow your CSS skills. Land your dream job.

Custom Bootstrap Buttons via SCSS

  • # December 19, 2012 at 11:23 am

    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!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".