<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <section> <div class="row"> <div class="col-md-12"> <p>I needed dashboard buttons for a project without having to make lots of different images to use as buttons, as the new CMS was going to be bootstrap based i decided to make them with glyphicons in custom sized buttons.</p> </div> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-thumbs-up"></span> Admin Dashboard Buttons</h3> </div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <!-- grey --> <a href="#" class="btn btn-grey btn-lg" role="button"><span class="glyphicon glyphicon-cog glyphsize red"></span> <br />Example<br />Button <span class="glyphicon glyphicon-cog black"></span></a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- dblue --> <a href="#" class="btn btn-dblue btn-lg" role="button"><span class="glyphicon glyphicon-user glyphsize"></span> <br />Add <span class="glyphicon glyphicon-plus green"></span><br />Customer</a> <a href="#" class="btn btn-dblue btn-lg" role="button"><span class="glyphicon glyphicon-user glyphsize"></span> <br />edit <span class="glyphicon glyphicon-edit yellow"></span><br />Customer</a> <a href="#" class="btn btn-dblue btn-lg" role="button"><span class="glyphicon glyphicon-user glyphsize"></span> <br />Delete <span class="glyphicon glyphicon-minus red"></span><br />Customer</a> <a href="#" class="btn btn-dblue btn-lg" role="button"><span class="glyphicon glyphicon-user glyphsize"></span> <br />Customer<br />Marketing <span class="glyphicon glyphicon-envelope"></span></a> <a href="#" class="btn btn-dblue btn-lg" role="button"><span class="glyphicon glyphicon-user glyphsize"></span> <br />Customer<br />Reporting <span class="glyphicon glyphicon-signal"></span></a> <a href="#" class="btn btn-dblue btn-lg" role="button"><span class="glyphicon glyphicon-user glyphsize"></span> <br />Customer<br />Database <span class="glyphicon glyphicon-book"></span></a> <a href="#" class="btn btn-dblue btn-lg" role="button"><span class="glyphicon glyphicon-user glyphsize"></span> <br />Customer<br />Export - CSV <span class="glyphicon glyphicon-export"></span></a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- dred --> <a href="#" class="btn btn-dred btn-lg" role="button"><span class="glyphicon glyphicon-calendar glyphsize"></span> <br/>Add <span class="glyphicon glyphicon-plus green"></span><br /> Appointment</a> <a href="#" class="btn btn-dred btn-lg" role="button"><span class="glyphicon glyphicon-calendar glyphsize"></span> <br />Edit <span class="glyphicon glyphicon-edit yellow"></span><br />Appointment</a> <a href="#" class="btn btn-dred btn-lg" role="button"><span class="glyphicon glyphicon-calendar glyphsize"></span> <br/>Delete <span class="glyphicon glyphicon-minus red"></span><br /> Appointment</a> <a href="#" class="btn btn-dred btn-lg" role="button"><span class="glyphicon glyphicon-calendar glyphsize"></span> <br/>View <span class="glyphicon glyphicon-eye-open"></span><br />Diary</a> <a href="#" class="btn btn-dred btn-lg" role="button"><span class="glyphicon glyphicon-calendar glyphsize"></span> <br/>Manage <br /> Diary</a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- dgreen --> <a href="#" class="btn btn-dgreen btn-lg" role="button"><span class="glyphicon glyphicon-signal glyphsize green"></span> <br/>Business<br />Reports </a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- mred --> <a href="#" class="btn btn-mred btn-lg" role="button"><span class="glyphicon glyphicon-envelope glyphsize"></span> <br/>Postage<br />Manager</a> <a href="#" class="btn btn-mred btn-lg" role="button"><span class="glyphicon glyphicon-home glyphsize"></span> <br/>Postcode<br />Setup</a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- orange --> <a href="#" class="btn btn-orange btn-lg" role="button"><span class="glyphicon glyphicon-bullhorn glyphsize"></span> <br/>Announcement<br />Manager</a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- lblue --> <a href="#" class="btn btn-lblue btn-lg" role="button"><span class="glyphicon glyphicon-list glyphsize blue"></span> <br /><span class="blue">Category<br />Manager</span></a> <a href="#" class="btn btn-lblue btn-lg" role="button"><span class="glyphicon glyphicon-list-alt glyphsize blue"></span> <br/><span class="blue">SubCategory<br />Manager</span></a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- burnt --> <a href="#" class="btn btn-burnt btn-lg" role="button"><span class="glyphicon glyphicon-tint glyphsize yellow"></span> <br/>Colour<br />Manager</a> <a href="#" class="btn btn-burnt btn-lg" role="button"><span class="glyphicon glyphicon-cog glyphsize yellow"></span> <br/>Swatch<br />Setup</a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- green --> <a href="#" class="btn btn-green btn-lg" role="button"><span class="glyphicon glyphicon-dashboard glyphsize dgreen"></span> <br /><br />Dashboard</a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- lime --> <a href="#" class="btn btn-lime btn-lg" role="button"><span class="glyphicon glyphicon-globe glyphsize dgreen"></span> <span class="dgreen"><br />Website<br />Manager</span></a> <a href="#" class="btn btn-lime btn-lg" role="button"><span class="glyphicon glyphicon-cog glyphsize dgreen"></span> <span class="dgreen"><br />SEO<br />Setup</span></a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- mokka --> <a href="#" class="btn btn-mokka btn-lg" role="button"><span class="glyphicon glyphicon-triangle-right glyphsize green"></span><span class="glyphicon glyphicon-home glyphsize choc"></span> <br />Delivery<br />Setup</a> <a href="#" class="btn btn-mokka btn-lg" role="button"><span class="glyphicon glyphicon-tasks glyphsize choc"></span> <br />Departments<br />Setup</a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- dpurple --> <a href="#" class="btn btn-dpurple btn-lg" role="button"><span class="glyphicon glyphicon-gbp glyphsize lilac"></span> <br/>Payments<br />Manager</a> <a href="#" class="btn btn-dpurple btn-lg" role="button"><span class="glyphicon glyphicon-piggy-bank glyphsize mblue"></span> <br/>Paypal<br />System</a> <a href="#" class="btn btn-dpurple btn-lg" role="button"><span class="glyphicon glyphicon-user glyphsize"></span> <br/>Insurance<br />Claims</a> <a href="#" class="btn btn-dpurple btn-lg" role="button"><span class="glyphicon glyphicon-check glyphsize green"></span> <br/>Invoices<br />Paid</a> <a href="#" class="btn btn-dpurple btn-lg" role="button"><span class="glyphicon glyphicon-remove glyphsize red"></span> <br/>Invoices<br />Canceled</a> <a href="#" class="btn btn-dpurple btn-lg" role="button"><span class="glyphicon glyphicon-saved glyphsize lilac"></span> <br/>Invoices<br />Archived</a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- purple --> <a href="#" class="btn btn-purple btn-lg" role="button"><span class="glyphicon glyphicon-shopping-cart glyphsize black"></span> <br/>Shopping<br />Cart</a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- lilac --> <a href="#" class="btn btn-lilac btn-lg" role="button"><span class="glyphicon glyphicon-file glyphsize purple"></span> <br/>Product<br />Manager</a> <a href="#" class="btn btn-lilac btn-lg" role="button"><span class="glyphicon glyphicon-text-width glyphsize"></span> <br/>Product<br />Sizes</a> <a href="#" class="btn btn-lilac btn-lg" role="button"><span class="glyphicon glyphicon-text-width glyphsize purple"></span> <br/>Sizes<br />Manager</a> <a href="#" class="btn btn-lilac btn-lg" role="button"><span class="glyphicon glyphicon-th-large glyphsize"></span> <br/>Stock<br />Manager</a> </div> </div> <div class="row"> <div class="col-md-12"> <!-- yellow --> <a href="#" class="btn btn-yellow btn-lg" role="button"><span class="glyphicon glyphicon-user glyphsize orange"></span> <br/><span class="orange">User<br />Setup</span></a> <a href="#" class="btn btn-yellow btn-lg" role="button"><span class="glyphicon glyphicon-question-sign glyphsize orange"></span> <br/><span class="orange">Vaccination<br />Manager</span></a> </div> </div> </div> <div class="panel-footer"> <div class="pull-left">Author: Dennis Pattison</div> <div class="pull-right"><a href="http://www.dinara.co.uk" target="_blank">Dinara Design</a></div> <div class="clearfix"></div> </div> </div> </div> </div> </section> </div>

body { padding-top:20px; } .container { max-width: 1200px; } .panel-body .btn:not(.btn-block) { width:140px !important; height:135px !important; margin-bottom:10px !important; vertical-align: middle !important; text-align: center !important; text-wrap: normal !important; padding: 15px 0 0 0 !important; } /* Font Size For Button Text */ .glyphsize { font-size:48px !important; } .panel-footer { line-height:inherit !important; } /* Colours Used for Glyphicons and some text */ .black { color: #000;} .red { color: #F00; } .dgreen { color: #060; } .green { color: #0F0; } .blue { color: #00F; } .mblue { color: #09F; } .yellow { color: #FF0;} .purple { color: #609;} .lilac { color: #C6F; } .orange { color: #F90; } .choc { color: #330;} /* Button Colours */ .btn-dblue { color: #ffffff; background-color: #1B23BD; border-color: #000A7A; } .btn-dblue:hover, .btn-dblue:focus, .btn-dblue:active, .btn-dblue.active, .open .dropdown-toggle.btn-dblue { color: #ffffff; background-color: #18148C; border-color: #000A7A; } .btn-dblue:active, .btn-dblue.active, .open .dropdown-toggle.btn-dblue { background-image: none; } .btn-dblue.disabled, .btn-dblue[disabled], fieldset[disabled] .btn-dblue, .btn-dblue.disabled:hover, .btn-dblue[disabled]:hover, fieldset[disabled] .btn-dblue:hover, .btn-dblue.disabled:focus, .btn-dblue[disabled]:focus, fieldset[disabled] .btn-dblue:focus, .btn-dblue.disabled:active, .btn-dblue[disabled]:active, fieldset[disabled] .btn-dblue:active, .btn-dblue.disabled.active, .btn-dblue[disabled].active, fieldset[disabled] .btn-dblue.active { background-color: #1B23BD; border-color: #000A7A; } .btn-dblue .badge { color: #1B23BD; background-color: #ffffff; } .btn-dred { color: #ffffff; background-color: #B50D2E; border-color: #69021F; } .btn-dred:hover, .btn-dred:focus, .btn-dred:active, .btn-dred.active, .open .dropdown-toggle.btn-dred { color: #ffffff; background-color: #7A2435; border-color: #69021F; } .btn-dred:active, .btn-dred.active, .open .dropdown-toggle.btn-dred { background-image: none; } .btn-dred.disabled, .btn-dred[disabled], fieldset[disabled] .btn-dred, .btn-dred.disabled:hover, .btn-dred[disabled]:hover, fieldset[disabled] .btn-dred:hover, .btn-dred.disabled:focus, .btn-dred[disabled]:focus, fieldset[disabled] .btn-dred:focus, .btn-dred.disabled:active, .btn-dred[disabled]:active, fieldset[disabled] .btn-dred:active, .btn-dred.disabled.active, .btn-dred[disabled].active, fieldset[disabled] .btn-dred.active { background-color: #B50D2E; border-color: #69021F; } .btn-dred .badge { color: #B50D2E; background-color: #ffffff; } .btn-dgreen { color: #ffffff; background-color: #0DB548; border-color: #026926; } .btn-dgreen:hover, .btn-dgreen:focus, .btn-dgreen:active, .btn-dgreen.active, .open .dropdown-toggle.btn-dgreen { color: #ffffff; background-color: #287A24; border-color: #026926; } .btn-dgreen:active, .btn-dgreen.active, .open .dropdown-toggle.btn-dgreen { background-image: none; } .btn-dgreen.disabled, .btn-dgreen[disabled], fieldset[disabled] .btn-dgreen, .btn-dgreen.disabled:hover, .btn-dgreen[disabled]:hover, fieldset[disabled] .btn-dgreen:hover, .btn-dgreen.disabled:focus, .btn-dgreen[disabled]:focus, fieldset[disabled] .btn-dgreen:focus, .btn-dgreen.disabled:active, .btn-dgreen[disabled]:active, fieldset[disabled] .btn-dgreen:active, .btn-dgreen.disabled.active, .btn-dgreen[disabled].active, fieldset[disabled] .btn-dgreen.active { background-color: #0DB548; border-color: #026926; } .btn-dgreen .badge { color: #0DB548; background-color: #ffffff; } .btn-mblue { color: #ffffff; background-color: #0DA1B5; border-color: #025D69; } .btn-mblue:hover, .btn-mblue:focus, .btn-mblue:active, .btn-mblue.active, .open .dropdown-toggle.btn-mblue { color: #6FF; background-color: #247A7A; border-color: #025D69; } .btn-mblue:active, .btn-mblue.active, .open .dropdown-toggle.btn-mblue { background-image: none; } .btn-mblue.disabled, .btn-mblue[disabled], fieldset[disabled] .btn-mblue, .btn-mblue.disabled:hover, .btn-mblue[disabled]:hover, fieldset[disabled] .btn-mblue:hover, .btn-mblue.disabled:focus, .btn-mblue[disabled]:focus, fieldset[disabled] .btn-mblue:focus, .btn-mblue.disabled:active, .btn-mblue[disabled]:active, fieldset[disabled] .btn-mblue:active, .btn-mblue.disabled.active, .btn-mblue[disabled].active, fieldset[disabled] .btn-mblue.active { background-color: #0DA1B5; border-color: #025D69; } .btn-mblue .badge { color: #0DA1B5; background-color: #ffffff; } .btn-burnt { color: #ffffff; background-color: #B5690D; border-color: #694302; } .btn-burnt:hover, .btn-burnt:focus, .btn-burnt:active, .btn-burnt.active, .open .dropdown-toggle.btn-burnt { color: #fffccc; background-color: #7A5024; border-color: #694302; } .btn-burnt:active, .btn-burnt.active, .open .dropdown-toggle.btn-burnt { background-image: none; } .btn-burnt.disabled, .btn-burnt[disabled], fieldset[disabled] .btn-burnt, .btn-burnt.disabled:hover, .btn-burnt[disabled]:hover, fieldset[disabled] .btn-burnt:hover, .btn-burnt.disabled:focus, .btn-burnt[disabled]:focus, fieldset[disabled] .btn-burnt:focus, .btn-burnt.disabled:active, .btn-burnt[disabled]:active, fieldset[disabled] .btn-burnt:active, .btn-burnt.disabled.active, .btn-burnt[disabled].active, fieldset[disabled] .btn-burnt.active { background-color: #B5690D; border-color: #694302; } .btn-burnt .badge { color: #B5690D; background-color: #ffffff; } .btn-grey { color: #ffffff; background-color: #A6A1AD; border-color: #605D70; } .btn-grey:hover, .btn-grey:focus, .btn-grey:active, .btn-grey.active, .open .dropdown-toggle.btn-grey { color: #ffffff; background-color: #413C47; border-color: #605D70; } .btn-grey:active, .btn-grey.active, .open .dropdown-toggle.btn-grey { background-image: none; } .btn-grey.disabled, .btn-grey[disabled], fieldset[disabled] .btn-grey, .btn-grey.disabled:hover, .btn-grey[disabled]:hover, fieldset[disabled] .btn-grey:hover, .btn-grey.disabled:focus, .btn-grey[disabled]:focus, fieldset[disabled] .btn-grey:focus, .btn-grey.disabled:active, .btn-grey[disabled]:active, fieldset[disabled] .btn-grey:active, .btn-grey.disabled.active, .btn-grey[disabled].active, fieldset[disabled] .btn-grey.active { background-color: #A6A1AD; border-color: #605D70; } .btn-grey .badge { color: #A6A1AD; background-color: #ffffff; } .btn-mred { color: #FFFFFF; background-color: #E01919; border-color: #BD4242; } .btn-mred:hover, .btn-mred:focus, .btn-mred:active, .btn-mred.active, .open .dropdown-toggle.btn-mred { color: #FFFFFF; background-color: #871111; border-color: #BD4242; } .btn-mred:active, .btn-mred.active, .open .dropdown-toggle.btn-mred { background-image: none; } .btn-mred.disabled, .btn-mred[disabled], fieldset[disabled] .btn-mred, .btn-mred.disabled:hover, .btn-mred[disabled]:hover, fieldset[disabled] .btn-mred:hover, .btn-mred.disabled:focus, .btn-mred[disabled]:focus, fieldset[disabled] .btn-mred:focus, .btn-mred.disabled:active, .btn-mred[disabled]:active, fieldset[disabled] .btn-mred:active, .btn-mred.disabled.active, .btn-mred[disabled].active, fieldset[disabled] .btn-mred.active { background-color: #E01919; border-color: #BD4242; } .btn-mred .badge { color: #E01919; background-color: #FFFFFF; } .btn-lblue { color: #FFFFFF; background-color: #19D9E0; border-color: #3E8A94; } .btn-lblue:hover, .btn-lblue:focus, .btn-lblue:active, .btn-lblue.active, .open .dropdown-toggle.btn-lblue { color: #FFFFFF; background-color: #0F6773; border-color: #3E8A94; } .btn-lblue:active, .btn-lblue.active, .open .dropdown-toggle.btn-lblue { background-image: none; } .btn-lblue.disabled, .btn-lblue[disabled], fieldset[disabled] .btn-lblue, .btn-lblue.disabled:hover, .btn-lblue[disabled]:hover, fieldset[disabled] .btn-lblue:hover, .btn-lblue.disabled:focus, .btn-lblue[disabled]:focus, fieldset[disabled] .btn-lblue:focus, .btn-lblue.disabled:active, .btn-lblue[disabled]:active, fieldset[disabled] .btn-lblue:active, .btn-lblue.disabled.active, .btn-lblue[disabled].active, fieldset[disabled] .btn-lblue.active { background-color: #19D9E0; border-color: #3E8A94; } .btn-lblue .badge { color: #19D9E0; background-color: #FFFFFF; } .btn-orange { color: #FFFFFF; background-color: #FABC00; border-color: #B39852; } .btn-orange:hover, .btn-orange:focus, .btn-orange:active, .btn-orange.active, .open .dropdown-toggle.btn-orange { color: #FFFFFF; background-color: #73570F; border-color: #B39852; } .btn-orange:active, .btn-orange.active, .open .dropdown-toggle.btn-orange { background-image: none; } .btn-orange.disabled, .btn-orange[disabled], fieldset[disabled] .btn-orange, .btn-orange.disabled:hover, .btn-orange[disabled]:hover, fieldset[disabled] .btn-orange:hover, .btn-orange.disabled:focus, .btn-orange[disabled]:focus, fieldset[disabled] .btn-orange:focus, .btn-orange.disabled:active, .btn-orange[disabled]:active, fieldset[disabled] .btn-orange:active, .btn-orange.disabled.active, .btn-orange[disabled].active, fieldset[disabled] .btn-orange.active { background-color: #FABC00; border-color: #B39852; } .btn-orange .badge { color: #FABC00; background-color: #FFFFFF; } .btn-yellow { color: #FFFFFF; background-color: #FAEE00; border-color: #D7DE11; } .btn-yellow:hover, .btn-yellow:focus, .btn-yellow:active, .btn-yellow.active, .open .dropdown-toggle.btn-yellow { color: #FFFFFF; background-color: #858F00; border-color: #D7DE11; } .btn-yellow:active, .btn-yellow.active, .open .dropdown-toggle.btn-yellow { background-image: none; } .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: #FAEE00; border-color: #D7DE11; } .btn-yellow .badge { color: #FAEE00; background-color: #FFFFFF; } .btn-purple { color: #ffffff; background-color: #7319E8; border-color: #4430AB; } .btn-purple:hover, .btn-purple:focus, .btn-purple:active, .btn-purple.active, .open .dropdown-toggle.btn-purple { color: #ffffff; background-color: #552299; border-color: #4430AB; } .btn-purple:active, .btn-purple.active, .open .dropdown-toggle.btn-purple { background-image: none; } .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: #7319E8; border-color: #4430AB; } .btn-purple .badge { color: #7319E8; background-color: #ffffff; } .btn-dpurple { color: #ffffff; background-color: #430B8C; border-color: #1D0D6B; } .btn-dpurple:hover, .btn-dpurple:focus, .btn-dpurple:active, .btn-dpurple.active, .open .dropdown-toggle.btn-dpurple { color: #ffffff; background-color: #3C1173; border-color: #1D0D6B; } .btn-dpurple:active, .btn-dpurple.active, .open .dropdown-toggle.btn-dpurple { background-image: none; } .btn-dpurple.disabled, .btn-dpurple[disabled], fieldset[disabled] .btn-dpurple, .btn-dpurple.disabled:hover, .btn-dpurple[disabled]:hover, fieldset[disabled] .btn-dpurple:hover, .btn-dpurple.disabled:focus, .btn-dpurple[disabled]:focus, fieldset[disabled] .btn-dpurple:focus, .btn-dpurple.disabled:active, .btn-dpurple[disabled]:active, fieldset[disabled] .btn-dpurple:active, .btn-dpurple.disabled.active, .btn-dpurple[disabled].active, fieldset[disabled] .btn-dpurple.active { background-color: #430B8C; border-color: #1D0D6B; } .btn-dpurple .badge { color: #430B8C; background-color: #ffffff; } .btn-lilac { color: #ffffff; background-color: #B07EF2; border-color: #7B6CC7; } .btn-lilac:hover, .btn-lilac:focus, .btn-lilac:active, .btn-lilac.active, .open .dropdown-toggle.btn-lilac { color: #ffffff; background-color: #6D4B99; border-color: #7B6CC7; } .btn-lilac:active, .btn-lilac.active, .open .dropdown-toggle.btn-lilac { background-image: none; } .btn-lilac.disabled, .btn-lilac[disabled], fieldset[disabled] .btn-lilac, .btn-lilac.disabled:hover, .btn-lilac[disabled]:hover, fieldset[disabled] .btn-lilac:hover, .btn-lilac.disabled:focus, .btn-lilac[disabled]:focus, fieldset[disabled] .btn-lilac:focus, .btn-lilac.disabled:active, .btn-lilac[disabled]:active, fieldset[disabled] .btn-lilac:active, .btn-lilac.disabled.active, .btn-lilac[disabled].active, fieldset[disabled] .btn-lilac.active { background-color: #B07EF2; border-color: #7B6CC7; } .btn-lilac .badge { color: #B07EF2; background-color: #ffffff; } .btn-lgreen { color: #ffffff; background-color: #84F27E; border-color: #6CC779; } .btn-lgreen:hover, .btn-lgreen:focus, .btn-lgreen:active, .btn-lgreen.active, .open .dropdown-toggle.btn-lgreen { color: #ffffff; background-color: #4B9954; border-color: #6CC779; } .btn-lgreen:active, .btn-lgreen.active, .open .dropdown-toggle.btn-lgreen { background-image: none; } .btn-lgreen.disabled, .btn-lgreen[disabled], fieldset[disabled] .btn-lgreen, .btn-lgreen.disabled:hover, .btn-lgreen[disabled]:hover, fieldset[disabled] .btn-lgreen:hover, .btn-lgreen.disabled:focus, .btn-lgreen[disabled]:focus, fieldset[disabled] .btn-lgreen:focus, .btn-lgreen.disabled:active, .btn-lgreen[disabled]:active, fieldset[disabled] .btn-lgreen:active, .btn-lgreen.disabled.active, .btn-lgreen[disabled].active, fieldset[disabled] .btn-lgreen.active { background-color: #84F27E; border-color: #6CC779; } .btn-lgreen .badge { color: #84F27E; background-color: #ffffff; } .btn-lime { color: #ffffff; background-color: #4BFC41; border-color: #6CC779; } .btn-lime:hover, .btn-lime:focus, .btn-lime:active, .btn-lime.active, .open .dropdown-toggle.btn-lime { color: #ffffff; background-color: #4B9954; border-color: #6CC779; } .btn-lime:active, .btn-lime.active, .open .dropdown-toggle.btn-lime { background-image: none; } .btn-lime.disabled, .btn-lime[disabled], fieldset[disabled] .btn-lime, .btn-lime.disabled:hover, .btn-lime[disabled]:hover, fieldset[disabled] .btn-lime:hover, .btn-lime.disabled:focus, .btn-lime[disabled]:focus, fieldset[disabled] .btn-lime:focus, .btn-lime.disabled:active, .btn-lime[disabled]:active, fieldset[disabled] .btn-lime:active, .btn-lime.disabled.active, .btn-lime[disabled].active, fieldset[disabled] .btn-lime.active { background-color: #4BFC41; border-color: #6CC779; } .btn-lime .badge { color: #4BFC41; background-color: #ffffff; } .btn-green { color: #ffffff; background-color: #02C702; border-color: #0B9C21; } .btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active, .open .dropdown-toggle.btn-green { color: #ffffff; background-color: #106E1B; border-color: #0B9C21; } .btn-green:active, .btn-green.active, .open .dropdown-toggle.btn-green { background-image: none; } .btn-green.disabled, .btn-green[disabled], fieldset[disabled] .btn-green, .btn-green.disabled:hover, .btn-green[disabled]:hover, fieldset[disabled] .btn-green:hover, .btn-green.disabled:focus, .btn-green[disabled]:focus, fieldset[disabled] .btn-green:focus, .btn-green.disabled:active, .btn-green[disabled]:active, fieldset[disabled] .btn-green:active, .btn-green.disabled.active, .btn-green[disabled].active, fieldset[disabled] .btn-green.active { background-color: #02C702; border-color: #0B9C21; } .btn-green .badge { color: #02C702; background-color: #ffffff; } .btn-mokka { color: #ffffff; background-color: #B38744; border-color: #856820; } .btn-mokka:hover, .btn-mokka:focus, .btn-mokka:active, .btn-mokka.active, .open .dropdown-toggle.btn-mokka { color: #ffffff; background-color: #6B641A; border-color: #856820; } .btn-mokka:active, .btn-mokka.active, .open .dropdown-toggle.btn-mokka { background-image: none; } .btn-mokka.disabled, .btn-mokka[disabled], fieldset[disabled] .btn-mokka, .btn-mokka.disabled:hover, .btn-mokka[disabled]:hover, fieldset[disabled] .btn-mokka:hover, .btn-mokka.disabled:focus, .btn-mokka[disabled]:focus, fieldset[disabled] .btn-mokka:focus, .btn-mokka.disabled:active, .btn-mokka[disabled]:active, fieldset[disabled] .btn-mokka:active, .btn-mokka.disabled.active, .btn-mokka[disabled].active, fieldset[disabled] .btn-mokka.active { background-color: #B38744; border-color: #856820; } .btn-mokka .badge { color: #B38744; background-color: #ffffff; }