buttons colors

This bootstrap snippet called "buttons colors" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: buttons

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="page-body">
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="well with-header with-footer">
                <div class="header bordered-blue">Basic Buttons</div>
                <div class="buttons-preview">
                    <a class="btn btn-link">Link</a>
                    <a href="javascript:void(0);" class="btn btn-default">Default</a>
                    <a href="javascript:void(0);" class="btn btn-primary">Primary</a>
                    <a href="javascript:void(0);" class="btn btn-info">Info</a>
                    <a href="javascript:void(0);" class="btn btn-success">Success</a>
                    <a href="javascript:void(0);" class="btn btn-warning">Warning</a>
                    <a href="javascript:void(0);" class="btn btn-danger">Danger</a>
                </div>
                <div class="footer"><code>.btn .btn-default, .btn-primary, ...</code></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="well with-header  with-footer">
                <div class="header bordered-blue">Colered Buttons</div>
                <div class="buttons-preview">
                    <a href="javascript:void(0);" class="btn btn-blue">Blue</a>
                    <a href="javascript:void(0);" class="btn btn-sky">Sky</a>
                    <a href="javascript:void(0);" class="btn btn-azure">Azure</a>
                    <a href="javascript:void(0);" class="btn btn-palegreen">Pale Green</a>
                    <a href="javascript:void(0);" class="btn btn-yellow">Yellow</a>
                    <a href="javascript:void(0);" class="btn btn-darkorange">Dark Orange</a>
                    <a href="javascript:void(0);" class="btn btn-magenta">Magenta</a>
                    <a href="javascript:void(0);" class="btn btn-purple">Purple</a>
                    <a href="javascript:void(0);" class="btn btn-maroon">Maroon</a>
                </div>
                <div class="footer"><code>.btn .btn-blue, .btn-purple, ...</code></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="well with-header  with-footer">
                <div class="header bordered-blue">Shiny Buttons</div>
                <div class="buttons-preview">
                    <a href="javascript:void(0);" class="btn btn-default shiny">Default</a>
                    <a href="javascript:void(0);" class="btn btn-primary shiny">Primary</a>
                    <a href="javascript:void(0);" class="btn btn-info shiny">Info</a>
                    <a href="javascript:void(0);" class="btn btn-success shiny">Success</a>
                    <a href="javascript:void(0);" class="btn btn-warning shiny">Warning</a>
                    <a href="javascript:void(0);" class="btn btn-danger shiny">Danger</a>
                    <a href="javascript:void(0);" class="btn btn-blue shiny">Blue</a>
                    <a href="javascript:void(0);" class="btn btn-sky shiny">Sky</a>
                    <a href="javascript:void(0);" class="btn btn-azure shiny">Azure</a>
                    <a href="javascript:void(0);" class="btn btn-palegreen shiny">Pale Green</a>
                    <a href="javascript:void(0);" class="btn btn-yellow shiny">Yellow</a>
                    <a href="javascript:void(0);" class="btn btn-darkorange shiny">Dark Orange</a>
                    <a href="javascript:void(0);" class="btn btn-magenta shiny">Magenta</a>
                    <a href="javascript:void(0);" class="btn btn-purple shiny">Purple</a>
                    <a href="javascript:void(0);" class="btn btn-maroon shiny">Maroon</a>
                </div>
                <div class="footer"><code>.btn .btn-blue .shiny, .btn-purple .shiny, ...</code></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="well with-header  with-footer">
                <div class="header bordered-blue">Sized Buttons</div>
                <div class="buttons-preview">
                    <a href="javascript:void(0);" class="btn btn-blue btn-lg">Large</a>
                    <a href="javascript:void(0);" class="btn btn-yellow">Default</a>
                    <a href="javascript:void(0);" class="btn btn-darkorange btn-sm">Small</a>
                    <a href="javascript:void(0);" class="btn btn-palegreen btn-xs">Mini</a>
                </div>
                <div class="footer"><code>.btn .btn-lg, .btn-sm, .btn-xs</code></div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="well with-header  with-footer">
                <div class="header bordered-blue">Circle Buttons</div>
                <div class="buttons-preview">
                    <a href="javascript:void(0);" class="btn btn-warning  btn-circle btn-lg"><i class="glyphicon glyphicon-camera"></i></a>
                    <a href="javascript:void(0);" class="btn btn-info  btn-circle"><i class="glyphicon glyphicon-retweet"></i></a>
                    <a href="javascript:void(0);" class="btn btn-danger btn-circle btn-sm"><i class="glyphicon glyphicon-list"></i></a>
                    <a href="javascript:void(0);" class="btn btn-default  btn-circle btn-xs"><i class="glyphicon glyphicon-ok"></i></a>
                </div>
                <div class="footer"><code>.btn .btn-circle</code></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="well with-header with-footer">
                <div class="header bordered-blue">Buttons With Icon</div>
                <div class="buttons-preview">
                    <a class="btn btn-default purple" href="javascript:void(0);"><i class="fa fa-plus"></i> Add</a>
                    <a class="btn btn-primary" href="javascript:void(0);"><i class="fa fa-shopping-cart"></i> Buy</a>
                    <a class="btn btn-danger" href="javascript:void(0);"><i class="fa fa-times"></i> Delete</a>
                    <a class="btn btn-success" href="javascript:void(0);">Ok <i class="fa fa-check right"></i></a>
                    <a class="btn btn-info" href="javascript:void(0);">Info <i class="fa fa-warning right"></i></a>

                </div>
                <div class="footer"><code>&lt; i class="fa fa-times" /&gt;</code></div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="well with-header with-footer">
                <div class="header bordered-blue">Labeled Buttons</div>
                <div class="buttons-preview">
                    <a href="javascript:void(0);" class="btn btn-labeled btn-palegreen">
                        <i class="btn-label glyphicon glyphicon-ok"></i>Success
                    </a>
                    <a href="javascript:void(0);" class="btn btn-labeled btn-darkorange">
                        <i class="btn-label glyphicon glyphicon-remove"></i>Error
                    </a>
                    <a href="javascript:void(0);" class="btn btn-labeled btn-yellow">
                        <i class="btn-label fa fa-warning"></i>Warning
                    </a>
                    <a href="javascript:void(0);" class="btn btn-labeled btn-blue">
                        <i class="btn-label fa fa-exclamation"></i>Info
                    </a>
                </div>
                <div class="footer"><code>.btn .btn-labeled</code></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="well with-header with-footer">
                <div class="header bordered-blue">Icon Buttons</div>
                <div class="buttons-preview">
                    <a class="btn btn-default btn-lg shiny icon-only blue" href="javascript:void(0);"><i class="fa fa-plus"></i></a>
                    <a class="btn btn-default shiny icon-only yellow" href="javascript:void(0);"><i class="fa fa-lock "></i></a>
                    <a class="btn btn-default btn-sm shiny icon-only danger" href="javascript:void(0);"><i class="fa fa-times "></i></a>
                    <a class="btn btn-default btn-xs shiny icon-only success" href="javascript:void(0);"><i class="fa fa-cog"></i></a>
                    <hr class="wide">
                    <a class="btn btn-blue btn-lg icon-only white" href="javascript:void(0);"><i class="fa fa-plus"></i></a>
                    <a class="btn btn-yellow icon-only white" href="javascript:void(0);"><i class="fa fa-lock"></i></a>
                    <a class="btn btn-danger btn-sm icon-only white" href="javascript:void(0);"><i class="fa fa-times "></i></a>
                    <a class="btn btn-success btn-xs icon-only white" href="javascript:void(0);"><i class="fa fa-cog"></i></a>
                </div>
                <div class="footer"><code>.btn .icon-only</code></div>
            </div>
            <div class="well with-header with-footer">
                <div class="header bordered-blue">Block Buttons</div>
                <div class="clearfix">
                    <a href="#" class="btn btn-yellow btn-block shiny">Link</a>
                    <button class="btn btn-warning btn-block">Button</button>
                    <input type="button" class="btn btn-darkorange btn-block" value="Input">
                    <input type="submit" class="btn btn-danger btn-block" value="Submit">
                </div>
                <div class="footer"><code>.btn .btn-block</code></div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="well with-header with-footer">
                <div class="header bordered-blue">DropDown Buttons</div>
                <div class="buttons-preview">
                    <div class="btn-group">
                        <a class="btn btn-default shiny " href="javascript:void(0);">Default</a>
                        <a class="btn btn-default  dropdown-toggle shiny" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-primary shiny" href="javascript:void(0);">Primary</a>
                        <a class="btn btn-primary dropdown-toggle shiny" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-primary">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-danger shiny">Danger</a>
                        <a class="btn btn-danger dropdown-toggle shiny" data-toggle="dropdown"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-danger" role="menu">
                            <li>
                                <a href="#">Action</a>
                            </li>
                            <li>
                                <a href="#">Another action</a>
                            </li>
                            <li>
                                <a href="#">Something else here</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-warning shiny">Warning</a>
                        <a class="btn btn-warning dropdown-toggle shiny" data-toggle="dropdown"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-warning" role="menu">
                            <li>
                                <a href="#">Action</a>
                            </li>
                            <li>
                                <a href="#">Another action</a>
                            </li>
                            <li>
                                <a href="#">Something else here</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <hr class="wide">
                    <div class="btn-group">
                        <a class="btn btn-lg btn-default" href="javascript:void(0);">Large</a>
                        <a class="btn btn-lg btn-default  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-blue" href="javascript:void(0);">Default</a>
                        <a class="btn btn-blue dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-blue">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-sm btn-darkorange">Small</a>
                        <a class="btn btn-sm btn-darkorange dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-darkorange" role="menu">
                            <li>
                                <a href="#">Action</a>
                            </li>
                            <li>
                                <a href="#">Another action</a>
                            </li>
                            <li>
                                <a href="#">Something else here</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-xs btn-yellow">mini</a>
                        <a class="btn btn-xs btn-yellow dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-yellow" role="menu">
                            <li>
                                <a href="#">Action</a>
                            </li>
                            <li>
                                <a href="#">Another action</a>
                            </li>
                            <li>
                                <a href="#">Something else here</a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <hr class="wide">
                    <div class="btn-group dropup">
                        <a class="btn btn-default shiny">
                            Drop Up
                        </a>
                        <a class="btn btn-default dropdown-toggle shiny" data-toggle="dropdown">
                            <i class="fa fa-angle-up"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group dropup">
                        <a class="btn btn-sky shiny">
                            Drop Up
                        </a>
                        <a class="btn btn-sky dropdown-toggle shiny" data-toggle="dropdown">
                            <i class="fa fa-angle-up"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-sky">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group dropup">
                        <a class="btn btn-magenta shiny">
                            Drop Up
                        </a>
                        <a class="btn btn-magenta dropdown-toggle shiny" data-toggle="dropdown">
                            <i class="fa fa-angle-up"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-magenta">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group dropup">
                        <a class="btn btn-purple shiny">
                            Drop Up
                        </a>
                        <a class="btn btn-purple dropdown-toggle shiny" data-toggle="dropdown">
                            <i class="fa fa-angle-up"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-purple">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <hr class="wide">
                    <div class="btn-group">
                        <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            Action <i class="fa fa-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-azure dropdown-toggle" data-toggle="dropdown">
                            Action <i class="fa fa-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-azure">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-maroon dropdown-toggle" data-toggle="dropdown">
                            Action <i class="fa fa-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-maroon">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <hr class="wide">
                    <div class="btn-group">
                        <a class="btn btn-success" href="javascript:void(0);">Combined</a>
                        <a class="btn btn-palegreen dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-palegreen">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-danger" href="javascript:void(0);">Combined</a>
                        <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-warning">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-maroon" href="javascript:void(0);">Combined</a>
                        <a class="btn btn-magenta dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-magenta">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-azure" href="javascript:void(0);">Combined</a>
                        <a class="btn btn-blue dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-blue">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-success" href="javascript:void(0);">Combined</a>
                        <a class="btn btn-darkorange dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-darkorange">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-darkorange whitesmoke" href="javascript:void(0);">Combined</a>
                        <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-danger">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-blue whitesmoke" href="javascript:void(0);">Combined</a>
                        <a class="btn btn-palegreen dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-palegreen">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-palegreen whitesmoke" href="javascript:void(0);">Combined</a>
                        <a class="btn btn-yellow dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-yellow">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-magenta whitesmoke" href="javascript:void(0);">Combined</a>
                        <a class="btn btn-maroon dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-maroon">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="footer"><code></code></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="well with-header with-footer">
                <div class="header bordered-blue">Button Groups</div>
                <div class="buttons-preview">
                    <div class="btn-toolbar">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default">
                                1
                            </button>
                            <button type="button" class="btn btn-default">
                                2
                            </button>
                            <button type="button" class="btn btn-default">
                                3
                            </button>
                            <button type="button" class="btn btn-default">
                                4
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default">
                                5
                            </button>
                            <button type="button" class="btn btn-default">
                                6
                            </button>
                            <button type="button" class="btn btn-default">
                                7
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default">
                                8
                            </button>
                        </div>
                    </div>
                    <hr class="wide">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">
                            <i class="fa fa-align-left"></i>
                        </button>
                        <button type="button" class="btn btn-default">
                            <i class="fa fa-align-center"></i>
                        </button>
                        <button type="button" class="btn btn-default">
                            <i class="fa fa-align-right"></i>
                        </button>
                        <button type="button" class="btn btn-default">
                            <i class="fa fa-align-justify"></i>
                        </button>
                    </div>
                    <hr class="wide">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default"><i class="fa fa-user"></i> Profile</button>
                        <button type="button" class="btn btn-default"><i class="fa fa-cogs"></i> Settings</button>
                        <button type="button" class="btn btn-default"><i class="fa fa-bullhorn"></i> Feeds</button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-ellipsis-horizontal"></i> More <i class="fa fa-angle-down"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Dropdown link</a>
                                </li>
                                <li>
                                    <a href="#">Dropdown link</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <hr class="wide">

                <div class="btn-group-vertical">
                    <button type="button" class="btn btn-default">Button</button>
                    <div class="btn-group">
                        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            Dropdown <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                            <li>
                                <a href="#">Dropdown link</a>
                            </li>
                            <li>
                                <a href="#">Dropdown link</a>
                            </li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-default">Button</button>
                    <button type="button" class="btn btn-default">Button</button>
                    <div class="btn-group">
                        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            Dropdown <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
                            <li>
                                <a href="#">Dropdown link</a>
                            </li>
                            <li>
                                <a href="#">Dropdown link</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="btn-group-vertical">
                    <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-left"></i></a>
                    <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-center"></i></a>
                    <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-right"></i></a>
                    <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-justify"></i></a>
                </div>
                <div class="btn-group-vertical">
                    <button type="button" class="btn btn-default">
                        Top
                    </button>
                    <button type="button" class="btn btn-default">
                        Middle
                    </button>
                    <button type="button" class="btn btn-default">
                        Bottom
                    </button>
                </div>
                <div class="footer"><code>.btn .btn-group .btn-group-vertical</code></div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="well with-header with-footer">
                <div class="header bordered-blue">Justified Buttons</div>
                <div class="buttons-preview">
                    <div class="btn-group btn-group-justified">
                        <a href="#" class="btn btn-default">Left</a>
                        <a href="#" class="btn btn-default">Middle</a>
                        <a href="#" class="btn btn-default">Right</a>
                    </div>
                    <div class="btn-group btn-group btn-group-justified">
                        <a href="#" class="btn btn-palegreen">Good</a>
                        <a href="#" class="btn btn-warning">Bad</a>
                        <a href="#" class="btn btn-danger">Ugly</a>
                    </div>

                </div>
                <div class="footer"><code>.btn-group .btn-group-justified</code></div>
            </div>
            <div class="well with-header with-footer">
                <div class="header bordered-blue">Active Buttons</div>
                <div class="buttons-preview">
                    <button type="button" class="btn btn-blue active">Active button</button>
                    <button type="button" class="btn btn-darkorange active"> Active Button</button>
                </div>
                <div class="footer"><code>.btn .active"</code></div>
            </div>
            <div class="well with-header with-footer">
                <div class="header bordered-blue">Disabled Buttons</div>
                <div class="buttons-preview">
                    <button type="button" class="btn btn-yellow" disabled="disabled">Primary button</button>
                    <button type="button" class="btn btn-palegreen" disabled="disabled">Button</button>
                </div>
                <div class="footer"><code>disabled="disabled"</code></div>
            </div>
        </div>
    </div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


body{margin-top:20px;}


.btn {
    cursor: pointer;
    vertical-align: middle;
    margin: 0;
    position: relative;
    display: inline-block;
    color: #fff;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    -webkit-transition: all .15s ease;
    -moz-transition: all .15s ease;
    -o-transition: all .15s ease;
    transition: all .15s ease;
    -webkit-border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 2px;
    -moz-background-clip: padding;
    border-radius: 2px;
    background-clip: padding-box;
    font-size: 13px
}

.btn:hover,
.btn:focus {
    color: #fff
}

.btn.btn-link {
    border: none !important;
    background: transparent none !important;
    color: #08c !important;
    -webkit-text-shadow: none !important;
    text-shadow: none !important;
    padding: 4px 12px !important;
    line-height: 20px !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important
}

.btn.btn-link:hover {
    background: none !important;
    -webkit-text-shadow: none !important;
    text-shadow: none !important
}

.btn.btn-link.active {
    background: none !important;
    text-decoration: underline;
    color: #009ceb !important
}

.btn.btn-link.active:after {
    display: none
}

.btn.btn-link.disabled,
.btn.btn-link[disabled] {
    background: 0;
    opacity: .65;
    filter: alpha(opacity=65)
}

.btn.btn-link.disabled:hover,
.btn.btn-link[disabled]:hover {
    background: none !important;
    text-decoration: none !important
}

.btn.shiny {
    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
    -webkit-border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 3px;
    -moz-background-clip: padding;
    border-radius: 3px;
    background-clip: padding-box
}

.btn.shiny:hover {
    zoom: 1;
    filter: alpha(opacity=90);
    -webkit-opacity: .9;
    -moz-opacity: .9;
    opacity: .9
}

.btn.shiny.active,
.btn.shiny:focus {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.btn.shiny.dropdown-toggle {
    border-left-width: 0 !important
}

.btn.btn-circle {
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    background-clip: padding-box;
    width: 60px;
    height: 60px;
    text-align: center;
    padding: 11px 12px
}

.btn.btn-circle>.fa,
.btn.btn-circle .typcn,
.btn.btn-circle .glyphicon,
.btn.btn-circle>[class*="wi-"] {
    font-size: 20px;
    margin: 0 auto;
    line-height: 34px
}

.btn.btn-circle.btn-xs {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0
}

.btn.btn-circle.btn-xs>.fa,
.btn.btn-circle.btn-xs .typcn,
.btn.btn-circle.btn-xs .glyphicon,
.btn.btn-circle.btn-xs>[class*="wi-"] {
    font-size: 12px;
    line-height: 14px
}

.btn.btn-circle.btn-sm {
    width: 50px;
    height: 50px;
    padding: 10px 15px
}

.btn.btn-circle.btn-sm>.fa,
.btn.btn-circle.btn-sm .typcn,
.btn.btn-circle.btn-sm .glyphicon,
.btn.btn-circle.btn-sm>[class*="wi-"] {
    font-size: 18px;
    line-height: 26px;
    border-radius: 50%
}

.btn.btn-circle.btn-lg {
    width: 70px;
    height: 70px;
    padding: 10px
}

.btn.btn-circle.btn-lg>.fa,
.btn.btn-circle.btn-lg .typcn,
.btn.btn-circle.btn-lg .glyphicon,
.btn.btn-circle.btn-lg>[class*="wi-"] {
    font-size: 28px;
    line-height: 46px
}

.btn.btn-labeled {
    position: relative;
    padding-left: 0
}

.btn.btn-labeled.btn-block .btn-label {
    margin-right: 0
}

.btn.btn-labeled .btn-label {
    display: block;
    float: left;
    margin: -7px 12px -9px -2px;
    padding: 8px 10px 8px 11px;
    position: relative;
    background: rgba(0, 0, 0, .06);
    line-height: 15px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px
}

.btn.btn-labeled .btn-label>.fa,
.btn.btn-labeled .btn-label .typcn,
.btn.btn-labeled .btn-label .glyphicon,
.btn.btn-labeled .btn-label>[class*="wi-"] {
    margin-right: 0
}

.btn.icon-only {
    width: 36px;
    height: 34px;
    padding: 5px 3px
}

.btn.icon-only>.fa,
.btn.icon-only .typcn,
.btn.icon-only .glyphicon,
.btn.icon-only>[class*="wi-"] {
    margin: 0;
    vertical-align: middle;
    text-align: center;
    padding: 0;
    font-size: 22px;
    line-height: 22px
}

.btn>.fa,
.btn .typcn,
.btn .glyphicon,
.btn>[class*="wi-"] {
    display: inline;
    margin-right: 4px;
    font-size: 14px
}

.btn>.fa.right,
.btn .typcn.right,
.btn .glyphicon.right,
.btn>[class*="wi-"].right {
    margin-right: 0;
    margin-left: 4px
}

.btn-xs {
    font-size: 11px;
    padding: 2px 7px
}

.btn-xs>.fa,
.btn-xs>.typcn,
.btn-xs>.glyphicon,
.btn-xs>[class*="wi-"] {
    font-size: 12px;
    margin-right: 2px
}

.btn-xs>.fa.right,
.btn-xs>.typcn.right,
.btn-xs>.glyphicon.right,
.btn-xs>[class*="wi-"].right {
    margin-right: 0;
    margin-left: 2px
}

.btn-xs.icon-only {
    width: 24px;
    height: 24px;
    padding: 2px 6px
}

.btn-xs.icon-only>.fa,
.btn-xs.icon-only>.typcn,
.btn-xs.icon-only>.glyphicon,
.btn-xs.icon-only>[class*="wi-"] {
    font-size: 12px;
    line-height: 7px
}

.btn-sm {
    font-size: 12px;
    padding: 4px 9px;
    line-height: 1.39
}

.btn-sm>.fa,
.btn-sm>.typcn,
.btn-sm>.glyphicon,
.btn-sm>[class*="wi-"] {
    font-size: 13px;
    margin-right: 3px
}

.btn-sm>.fa.right,
.btn-sm>.typcn.right,
.btn-sm>.glyphicon.right,
.btn-sm>[class*="wi-"].right {
    margin-right: 0;
    margin-left: 3px
}

.btn-sm.icon-only {
    width: 31px;
    height: 30px;
    padding: 3px !important
}

.btn-sm.icon-only>.fa,
.btn-sm.icon-only>.typcn,
.btn-sm.icon-only>.glyphicon,
.btn-sm.icon-only>[class*="wi-"] {
    font-size: 20px;
    line-height: 21px
}

.btn-lg {
    line-height: 1.35;
    padding: 9px 18px;
    font-size: 14px
}

.btn-lg.icon-only {
    width: 40px;
    height: 38px;
    padding: 6px !important
}

.btn-lg.icon-only>.fa,
.btn-lg.icon-only>.typcn,
.btn-lg.icon-only>.glyphicon,
.btn-lg.icon-only>[class*="wi-"] {
    font-size: 24px;
    line-height: 26px
}

.btn-lg>.fa,
.btn-lg>.typcn,
.btn-lg>.glyphicon,
.btn-lg>[class*="wi-"] {
    font-size: 16px;
    margin-right: 6px
}

.btn-lg>.fa.right,
.btn-lg>.typcn.right,
.btn-lg>.glyphicon.right,
.btn-lg>[class*="wi-"].right {
    margin-right: 0;
    margin-left: 6px
}

.btn,
.btn-default,
.btn:focus,
.btn-default:focus {
    color: #444;
    background-color: #fff;
    border-color: #ccc
}

.btn:hover,
.btn-default:hover {
    color: #444
}

.btn.shiny,
.btn-default.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(top, #fff 0, #ededed 100%);
    background-image: -moz-linear-gradient(top, #fff 0, #ededed 100%);
    background-image: -o-linear-gradient(top, #fff 0, #ededed 100%);
    background-image: linear-gradient(to bottom, #fff 0, #ededed 100%)
}

.btn.dropdown-toggle:not(:first-child),
.btn-default.dropdown-toggle:not(:first-child) {
    border-left-width: 0 !important;
    margin-left: -1px
}

.btn-default:hover,
.open .btn-default.dropdown-toggle {
    border-color: #b8b8b8;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1)
}

.open .btn-default.dropdown-toggle {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.btn-primary,
.btn-primary:focus {
    background-color: #427fed !important;
    border-color: #427fed;
    color: #fff
}

.btn-primary:hover {
    color: #fff
}

.btn-primary.dropdown-toggle {
    border-left-color: #6a99ee !important
}

.btn-primary.active {
    background-color: #2c56b1 !important;
    border-color: #21448d
}

.btn-primary.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iNSUiIHN0b3AtY29sb3I9IiMwMDk1ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNWVmZiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(center top, #0095ff 5%, #005eff 100%);
    background-image: -moz-linear-gradient(center top, #0095ff 5%, #005eff 100%);
    background-image: -o-linear-gradient(center top, #0095ff 5%, #005eff 100%);
    background-image: linear-gradient(center to bottom, #0095ff 5%, #005eff 100%)
}

.btn-primary:hover,
.open .btn-primary.dropdown-toggle {
    background-color: #4285f4 !important;
    border-color: #427fed
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    background-color: #427fed !important;
    border-color: #427fed;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-info,
.btn-info:focus {
    background-color: #57b5e3 !important;
    border-color: #57b5e3;
    color: #fff
}

.btn-info:hover {
    color: #fff
}

.btn-info.dropdown-toggle {
    border-left-color: #8bcdee !important
}

.btn-info.active {
    background-color: #5fa6d3 !important;
    border-color: #4396cb
}

.btn-info.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGFkZWUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzhhNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#00adee), to(#0078a5))
}

.btn-info:hover,
.open .btn-info.dropdown-toggle {
    background-color: #6abce2 !important;
    border-color: #6abce2
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
    background-color: #57b5e3 !important;
    border-color: #57b5e3;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-success,
.btn-success:focus {
    background-color: #53a93f !important;
    border-color: #53a93f !important;
    color: #fff
}

.btn-success:hover {
    color: #fff
}

.btn-success.dropdown-toggle {
    border-left-color: #a0d468 !important
}

.btn-success.active {
    background-color: #3e802f !important;
    border-color: #2f6124
}

.btn-success.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM3ZGI3MmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRlN2QwZSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#7db72f), to(#4e7d0e))
}

.btn-success:hover,
.open .btn-success.dropdown-toggle {
    background-color: #65b951 !important;
    border-color: #65b951
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
    background-color: #53a93f !important;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-warning,
.btn-warning:focus {
    background-color: #f4b400 !important;
    border-color: #f4b400;
    color: #fff
}

.btn-warning:hover {
    color: #fff
}

.btn-warning.dropdown-toggle {
    border-left-color: #ffce55 !important
}

.btn-warning.active {
    background-color: #f2a73e !important;
    border-color: #f0981c
}

.btn-warning.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmYWE1MWEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y0N2EyMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#faa51a), to(#f47a20))
}

.btn-warning:hover,
.open .btn-warning.dropdown-toggle {
    background-color: #f6c12a !important;
    border-color: #f6c12a
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
    background-color: #f4b400 !important;
    border-color: #f4b400;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-danger,
.btn-danger:focus {
    background-color: #d73d32 !important;
    border-color: #d73d32;
    color: #fff
}

.btn-danger:hover {
    color: #fff
}

.btn-danger.dropdown-toggle {
    border-left-color: #e46f61 !important
}

.btn-danger.active {
    background-color: #be3e2e !important;
    border-color: #9a3323
}

.btn-danger.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlZDFjMjQiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhMTMxNyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#ed1c24), to(#aa1317))
}

.btn-danger:hover,
.open .btn-danger.dropdown-toggle {
    background-color: #e74b37 !important;
    border-color: #e74b37
}

.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
    background-color: #d73d32 !important;
    border-color: #d73d32;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-blue,
.btn-blue:focus {
    background-color: #5db2ff !important;
    border-color: #5db2ff;
    color: #fff
}

.btn-blue:hover {
    color: #fff
}

.btn-blue.dropdown-toggle {
    border-left-color: #81c1fb !important
}

.btn-blue.active {
    background-color: #449cec !important;
    border-color: #3d90db
}

.btn-blue.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM3MGJhZmQiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ0OWNlYyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#70bafd), to(#449cec));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#70bafd), to(#449cec));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#70bafd), to(#449cec));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#70bafd), to(#449cec))
}

.btn-blue:hover,
.open .btn-blue.dropdown-toggle {
    background-color: #70bafd !important;
    border-color: #70bafd;
    color: #fff
}

.btn-blue.disabled,
.btn-blue[disabled],
fieldset[disabled] .btn-blue,
.btn-blue.disabled:hover,
.btn-blue[disabled]:hover,
fieldset[disabled] .btn-blue:hover,
.btn-blue.disabled:focus,
.btn-blue[disabled]:focus,
fieldset[disabled] .btn-blue:focus,
.btn-blue.disabled:active,
.btn-blue[disabled]:active,
fieldset[disabled] .btn-blue:active,
.btn-blue.disabled.active,
.btn-blue[disabled].active,
fieldset[disabled] .btn-blue.active {
    background-color: #5db2ff !important;
    border-color: #5db2ff;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-sky,
.btn-sky:focus {
    background-color: #11a9cc !important;
    border-color: #11a9cc;
    color: #fff
}

.btn-sky:hover {
    color: #fff
}

.btn-sky.dropdown-toggle {
    border-left-color: #81c1fb !important
}

.btn-sky.active {
    background-color: #2095b0 !important;
    border-color: #2f97af
}

.btn-sky.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyOGIzZDMiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIwOTViMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#28b3d3), to(#2095b0));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#28b3d3), to(#2095b0));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#28b3d3), to(#2095b0));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#28b3d3), to(#2095b0))
}

.btn-sky:hover,
.open .btn-sky.dropdown-toggle {
    background-color: #28b3d3 !important;
    border-color: #28b3d3;
    color: #fff
}

.btn-sky.disabled,
.btn-sky[disabled],
fieldset[disabled] .btn-sky,
.btn-sky.disabled:hover,
.btn-sky[disabled]:hover,
fieldset[disabled] .btn-sky:hover,
.btn-sky.disabled:focus,
.btn-sky[disabled]:focus,
fieldset[disabled] .btn-sky:focus,
.btn-sky.disabled:active,
.btn-sky[disabled]:active,
fieldset[disabled] .btn-sky:active,
.btn-sky.disabled.active,
.btn-sky[disabled].active,
fieldset[disabled] .btn-sky.active {
    background-color: #11a9cc !important;
    border-color: #11a9cc;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-azure,
.btn-azure:focus {
    background-color: #2dc3e8 !important;
    border-color: #2dc3e8;
    color: #fff
}

.btn-azure:hover {
    color: #fff
}

.btn-azure.dropdown-toggle {
    border-left-color: #3ecdf1 !important
}

.btn-azure.active {
    background-color: #2badce !important;
    border-color: #2badce
}

.btn-azure.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzZWNkZjEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJiYWRjZSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#3ecdf1), to(#2badce));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#3ecdf1), to(#2badce));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#3ecdf1), to(#2badce));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#3ecdf1), to(#2badce))
}

.btn-azure:hover,
.open .btn-azure.dropdown-toggle {
    background-color: #3ecdf1 !important;
    border-color: #3ecdf1;
    color: #fff
}

.btn-azure.disabled,
.btn-azure[disabled],
fieldset[disabled] .btn-azure,
.btn-azure.disabled:hover,
.btn-azure[disabled]:hover,
fieldset[disabled] .btn-azure:hover,
.btn-azure.disabled:focus,
.btn-azure[disabled]:focus,
fieldset[disabled] .btn-azure:focus,
.btn-azure.disabled:active,
.btn-azure[disabled]:active,
fieldset[disabled] .btn-azure:active,
.btn-azure.disabled.active,
.btn-azure[disabled].active,
fieldset[disabled] .btn-azure.active {
    background-color: #2dc3e8 !important;
    border-color: #2dc3e8;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-palegreen,
.btn-palegreen:focus {
    background-color: #a0d468 !important;
    border-color: #a0d468;
    color: #fff
}

.btn-palegreen:hover {
    color: #fff
}

.btn-palegreen.dropdown-toggle {
    border-left-color: #a6d791 !important
}

.btn-palegreen.active {
    background-color: #74aa5d !important;
    border-color: #699755
}

.btn-palegreen.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM5Y2Q1ODQiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc0YWE1ZCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#9cd584), to(#74aa5d));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#9cd584), to(#74aa5d));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#9cd584), to(#74aa5d));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#9cd584), to(#74aa5d))
}

.btn-palegreen:hover,
.open .btn-palegreen.dropdown-toggle {
    background-color: #9cd584 !important;
    border-color: #9cd584;
    color: #fff
}

.btn-palegreen.disabled,
.btn-palegreen[disabled],
fieldset[disabled] .btn-palegreen,
.btn-palegreen.disabled:hover,
.btn-palegreen[disabled]:hover,
fieldset[disabled] .btn-palegreen:hover,
.btn-palegreen.disabled:focus,
.btn-palegreen[disabled]:focus,
fieldset[disabled] .btn-palegreen:focus,
.btn-palegreen.disabled:active,
.btn-palegreen[disabled]:active,
fieldset[disabled] .btn-palegreen:active,
.btn-palegreen.disabled.active,
.btn-palegreen[disabled].active,
fieldset[disabled] .btn-palegreen.active {
    background-color: #a0d468 !important;
    border-color: #a0d468;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-yellow,
.btn-yellow:focus {
    background-color: #ffce55 !important;
    border-color: #ffce55;
    color: #fff
}

.btn-yellow:hover {
    color: #fff
}

.btn-yellow.dropdown-toggle {
    border-left-color: #f6d52e !important
}

.btn-yellow.active {
    background-color: #fbc220 !important;
    border-color: #f3ba17;
    color: #fff !important
}

.btn-yellow.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZGQzNWEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiYzIyMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#fdd35a), to(#fbc220));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#fdd35a), to(#fbc220));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#fdd35a), to(#fbc220));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#fdd35a), to(#fbc220))
}

.btn-yellow:hover,
.open .btn-yellow.dropdown-toggle {
    background-color: #fdd35a !important;
    border-color: #fdd35a;
    color: #fff
}

.btn-yellow.disabled,
.btn-yellow[disabled],
fieldset[disabled] .btn-yellow,
.btn-yellow.disabled:hover,
.btn-yellow[disabled]:hover,
fieldset[disabled] .btn-yellow:hover,
.btn-yellow.disabled:focus,
.btn-yellow[disabled]:focus,
fieldset[disabled] .btn-yellow:focus,
.btn-yellow.disabled:active,
.btn-yellow[disabled]:active,
fieldset[disabled] .btn-yellow:active,
.btn-yellow.disabled.active,
.btn-yellow[disabled].active,
fieldset[disabled] .btn-yellow.active {
    background-color: #ffce55 !important;
    border-color: #ffce55;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-darkorange,
.btn-darkorange:focus {
    background-color: #ed4e2a !important;
    border-color: #ed4e2a;
    color: #fff
}

.btn-darkorange:hover {
    color: #fff
}

.btn-darkorange.dropdown-toggle {
    border-left-color: #f07154 !important
}

.btn-darkorange.active {
    background-color: #da411f !important;
    border-color: #cc3918
}

.btn-darkorange.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlZjY5NGIiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RhNDExZiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#ef694b), to(#da411f));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#ef694b), to(#da411f));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#ef694b), to(#da411f));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#ef694b), to(#da411f))
}

.btn-darkorange:hover,
.open .btn-darkorange.dropdown-toggle {
    background-color: #ef694b !important;
    border-color: #ef694b;
    color: #fff
}

.btn-darkorange.disabled,
.btn-darkorange[disabled],
fieldset[disabled] .btn-darkorange,
.btn-darkorange.disabled:hover,
.btn-darkorange[disabled]:hover,
fieldset[disabled] .btn-darkorange:hover,
.btn-darkorange.disabled:focus,
.btn-darkorange[disabled]:focus,
fieldset[disabled] .btn-darkorange:focus,
.btn-darkorange.disabled:active,
.btn-darkorange[disabled]:active,
fieldset[disabled] .btn-darkorange:active,
.btn-darkorange.disabled.active,
.btn-darkorange[disabled].active,
fieldset[disabled] .btn-darkorange.active {
    background-color: #ed4e2a !important;
    border-color: #ed4e2a;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-magenta,
.btn-magenta:focus {
    background-color: #bc5679 !important;
    border-color: #bc5679;
    color: #fff
}

.btn-magenta:hover {
    color: #fff
}

.btn-magenta.dropdown-toggle {
    border-left-color: #c96d8c !important
}

.btn-magenta.active {
    background-color: #a5325a !important;
    border-color: #9f3156
}

.btn-magenta.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjNDYyODMiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2E1MzI1YSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#c46283), to(#a5325a));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#c46283), to(#a5325a));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#c46283), to(#a5325a));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#c46283), to(#a5325a))
}

.btn-magenta:hover,
.open .btn-magenta.dropdown-toggle {
    background-color: #c46283 !important;
    border-color: #c46283;
    color: #fff
}

.btn-magenta.disabled,
.btn-magenta[disabled],
fieldset[disabled] .btn-magenta,
.btn-magenta.disabled:hover,
.btn-magenta[disabled]:hover,
fieldset[disabled] .btn-magenta:hover,
.btn-magenta.disabled:focus,
.btn-magenta[disabled]:focus,
fieldset[disabled] .btn-magenta:focus,
.btn-magenta.disabled:active,
.btn-magenta[disabled]:active,
fieldset[disabled] .btn-magenta:active,
.btn-magenta.disabled.active,
.btn-magenta[disabled].active,
fieldset[disabled] .btn-magenta.active {
    background-color: #bc5679 !important;
    border-color: #bc5679;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-purple,
.btn-purple:focus {
    background-color: #7e3794 !important;
    border-color: #7e3794;
    color: #fff
}

.btn-purple:hover {
    color: #fff
}

.btn-purple.dropdown-toggle {
    border-left-color: #9852ae !important
}

.btn-purple.active {
    background-color: #69257e !important;
    border-color: #601e74
}

.btn-purple.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4YzQ0YTIiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY5MjU3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#8c44a2), to(#69257e));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#8c44a2), to(#69257e));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#8c44a2), to(#69257e));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#8c44a2), to(#69257e))
}

.btn-purple:hover,
.open .btn-purple.dropdown-toggle {
    background-color: #8c44a2 !important;
    border-color: #8c44a2;
    color: #fff
}

.btn-purple.disabled,
.btn-purple[disabled],
fieldset[disabled] .btn-purple,
.btn-purple.disabled:hover,
.btn-purple[disabled]:hover,
fieldset[disabled] .btn-purple:hover,
.btn-purple.disabled:focus,
.btn-purple[disabled]:focus,
fieldset[disabled] .btn-purple:focus,
.btn-purple.disabled:active,
.btn-purple[disabled]:active,
fieldset[disabled] .btn-purple:active,
.btn-purple.disabled.active,
.btn-purple[disabled].active,
fieldset[disabled] .btn-purple.active {
    background-color: #7e3794 !important;
    border-color: #7e3794;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn-maroon,
.btn-maroon:focus {
    background-color: #981b48 !important;
    border-color: #981b48;
    color: #fff
}

.btn-maroon:hover {
    color: #fff
}

.btn-maroon.dropdown-toggle {
    border-left-color: #b55274 !important
}

.btn-maroon.active {
    background-color: #7c1138 !important;
    border-color: #9f3156
}

.btn-maroon.shiny {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNhODI4NTYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg2MTIzYyIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(linear, left top, left bottom, from(#a82856), to(#86123c));
    background-image: -moz-linear-gradient(linear, left top, left bottom, from(#a82856), to(#86123c));
    background-image: -o-linear-gradient(linear, left top, left bottom, from(#a82856), to(#86123c));
    background-image: linear-gradient(linear, left to bottom, left bottom, from(#a82856), to(#86123c))
}

.btn-maroon:hover,
.open .btn-maroon.dropdown-toggle {
    background-color: #a82856 !important;
    border-color: #a82856;
    color: #fff
}

.btn-maroon.disabled,
.btn-maroon[disabled],
fieldset[disabled] .btn-maroon,
.btn-maroon.disabled:hover,
.btn-maroon[disabled]:hover,
fieldset[disabled] .btn-maroon:hover,
.btn-maroon.disabled:focus,
.btn-maroon[disabled]:focus,
fieldset[disabled] .btn-maroon:focus,
.btn-maroon.disabled:active,
.btn-maroon[disabled]:active,
fieldset[disabled] .btn-maroon:active,
.btn-maroon.disabled.active,
.btn-maroon[disabled].active,
fieldset[disabled] .btn-maroon.active {
    background-color: #981b48 !important;
    border-color: #981b48;
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5
}

.btn.disabled.active,
.btn[disabled].active,
.btn.disabled:focus,
.btn[disabled]:focus,
.btn.disabled:active,
.btn[disabled]:active {
    outline: 0
}

.btn.disabled:active,
.btn[disabled]:active {
    top: 0;
    left: 0
}

.open .btn.dropdown-toggle {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.btn-group>.btn:not(:first-child):not(.dropdown-toggle) {
    border-left: 0
}

.btn-group>.btn,
.btn-group>.btn+.btn {
    margin: 0
}

.btn-group>.btn:first-child {
    margin: 0;
    -webkit-border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 2px;
    -moz-background-clip: padding;
    border-radius: 2px;
    background-clip: padding-box
}

.btn-group>.btn:last-child {
    -webkit-border-radius: 0 2px 2px 0;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 0 2px 2px 0;
    -moz-background-clip: padding;
    border-radius: 0 2px 2px 0;
    background-clip: padding-box
}

.btn-group>.btn>.caret {
    margin-left: 1px;
    border-width: 5px;
    border-top-color: #eee;
    margin-top: 1px
}

.btn-group>.btn.btn-default>.caret {
    border-top-color: #333
}

.btn-group>.btn+.btn.dropdown-toggle {
    padding-left: 7px;
    padding-right: 7px
}

.btn-group>.btn+.btn-lg.dropdown-toggle {
    padding-right: 10px;
    padding-left: 10px
}

.btn-group>.btn+.btn-sm.dropdown-toggle {
    padding-right: 6px;
    padding-left: 6px
}

.btn-group>.btn+.btn-sm.dropdown-toggle .fa {
    line-height: 13px
}

.btn-group>.btn+.btn-xs.dropdown-toggle {
    padding-right: 5px;
    padding-left: 5px
}

.btn-group>.btn+.btn-xs.dropdown-toggle .fa {
    line-height: 13px
}

.btn-group .dropdown-toggle {
    -webkit-border-radius: 0 2px 2px 0;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 0 2px 2px 0;
    -moz-background-clip: padding;
    border-radius: 0 2px 2px 0;
    background-clip: padding-box
}

.btn-group .dropdown-toggle .fa {
    display: inline-block;
    margin-top: 1px;
    font-size: 14px;
    line-height: 14px;
    margin-right: 0;
    margin-left: 0
}

.btn-group>.btn,
.btn-group+.btn {
    margin: 0
}

.btn-group>.btn.active:after,
.btn-group+.btn.active:after {
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-bottom-width: 1px
}

.btn-group-vertical>.btn:not(:last-child) {
    border-bottom: 0
}

.btn-group-vertical>.btn:first-child:not(:last-child) {
    border-top-right-radius: 2px
}

.btn-group-vertical>.btn:last-child:not(:first-child) {
    border-bottom-left-radius: 2px
}

.btn-group-vertical>.btn,
.btn-group-vertical>.btn+.btn {
    margin: 0
}

.btn-group-vertical>.btn:first-child {
    margin-right: 0
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 24th 2016, 00:07

Views: 487