Bootstrap snippet: buttons colors

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: buttons



<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>
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 }
Dey-Dey

buttons colors

Dey-Dey
  Apr 24th, 14:40
119 Views