1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start
2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again
3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container bootdey">
<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="#/" class="btn btn-default">Default</a>
<a href="#/" class="btn btn-primary">Primary</a>
<a href="#/" class="btn btn-info">Info</a>
<a href="#/" class="btn btn-success">Success</a>
<a href="#/" class="btn btn-warning">Warning</a>
<a href="#/" 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="#/" class="btn btn-blue">Blue</a>
<a href="#/" class="btn btn-sky">Sky</a>
<a href="#/" class="btn btn-azure">Azure</a>
<a href="#/" class="btn btn-palegreen">Pale Green</a>
<a href="#/" class="btn btn-yellow">Yellow</a>
<a href="#/" class="btn btn-darkorange">Dark Orange</a>
<a href="#/" class="btn btn-magenta">Magenta</a>
<a href="#/" class="btn btn-purple">Purple</a>
<a href="#/" 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="#/" class="btn btn-default shiny">Default</a>
<a href="#/" class="btn btn-primary shiny">Primary</a>
<a href="#/" class="btn btn-info shiny">Info</a>
<a href="#/" class="btn btn-success shiny">Success</a>
<a href="#/" class="btn btn-warning shiny">Warning</a>
<a href="#/" class="btn btn-danger shiny">Danger</a>
<a href="#/" class="btn btn-blue shiny">Blue</a>
<a href="#/" class="btn btn-sky shiny">Sky</a>
<a href="#/" class="btn btn-azure shiny">Azure</a>
<a href="#/" class="btn btn-palegreen shiny">Pale Green</a>
<a href="#/" class="btn btn-yellow shiny">Yellow</a>
<a href="#/" class="btn btn-darkorange shiny">Dark Orange</a>
<a href="#/" class="btn btn-magenta shiny">Magenta</a>
<a href="#/" class="btn btn-purple shiny">Purple</a>
<a href="#/" 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="#/" class="btn btn-blue btn-lg">Large</a>
<a href="#/" class="btn btn-yellow">Default</a>
<a href="#/" class="btn btn-darkorange btn-sm">Small</a>
<a href="#/" 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="#/" class="btn btn-warning btn-circle btn-lg"><i class="glyphicon glyphicon-camera"></i></a>
<a href="#/" class="btn btn-info btn-circle"><i class="glyphicon glyphicon-retweet"></i></a>
<a href="#/" class="btn btn-danger btn-circle btn-sm"><i class="glyphicon glyphicon-list"></i></a>
<a href="#/" 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="#/"><i class="fa fa-plus"></i> Add</a>
<a class="btn btn-primary" href="#/"><i class="fa fa-shopping-cart"></i> Buy</a>
<a class="btn btn-danger" href="#/"><i class="fa fa-times"></i> Delete</a>
<a class="btn btn-success" href="#/">Ok <i class="fa fa-check right"></i></a>
<a class="btn btn-info" href="#/">Info <i class="fa fa-warning right"></i></a>
</div>
<div class="footer"><code>< i class="fa fa-times" /></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="#/" class="btn btn-labeled btn-palegreen">
<i class="btn-label glyphicon glyphicon-ok"></i>Success
</a>
<a href="#/" class="btn btn-labeled btn-darkorange">
<i class="btn-label glyphicon glyphicon-remove"></i>Error
</a>
<a href="#/" class="btn btn-labeled btn-yellow">
<i class="btn-label fa fa-warning"></i>Warning
</a>
<a href="#/" 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="#/"><i class="fa fa-plus"></i></a>
<a class="btn btn-default shiny icon-only yellow" href="#/"><i class="fa fa-lock "></i></a>
<a class="btn btn-default btn-sm shiny icon-only danger" href="#/"><i class="fa fa-times "></i></a>
<a class="btn btn-default btn-xs shiny icon-only success" href="#/"><i class="fa fa-cog"></i></a>
<hr class="wide"/>
<a class="btn btn-blue btn-lg icon-only white" href="#/"><i class="fa fa-plus"></i></a>
<a class="btn btn-yellow icon-only white" href="#/"><i class="fa fa-lock"></i></a>
<a class="btn btn-danger btn-sm icon-only white" href="#/"><i class="fa fa-times "></i></a>
<a class="btn btn-success btn-xs icon-only white" href="#/"><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="#/">Default</a>
<a class="btn btn-default dropdown-toggle shiny" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-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-primary shiny" href="#/">Primary</a>
<a class="btn btn-primary dropdown-toggle shiny" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu dropdown-primary">
<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-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="#/">Large</a>
<a class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-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-blue" href="#/">Default</a>
<a class="btn btn-blue dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu dropdown-blue">
<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-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="#/">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 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="#/">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 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="#/">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 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="#/">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-default dropdown-toggle" data-toggle="dropdown">
Action <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-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-azure dropdown-toggle" data-toggle="dropdown">
Action <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-azure">
<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-maroon dropdown-toggle" data-toggle="dropdown">
Action <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-maroon">
<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-success" href="#/">Combined</a>
<a class="btn btn-palegreen dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu dropdown-palegreen">
<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-danger" href="#/">Combined</a>
<a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu dropdown-warning">
<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-maroon" href="#/">Combined</a>
<a class="btn btn-magenta dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu dropdown-magenta">
<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-azure" href="#/">Combined</a>
<a class="btn btn-blue dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu dropdown-blue">
<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-success" href="#/">Combined</a>
<a class="btn btn-darkorange dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu dropdown-darkorange">
<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-darkorange whitesmoke" href="#/">Combined</a>
<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu dropdown-danger">
<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-blue whitesmoke" href="#/">Combined</a>
<a class="btn btn-palegreen dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu dropdown-palegreen">
<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-palegreen whitesmoke" href="#/">Combined</a>
<a class="btn btn-yellow dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu dropdown-yellow">
<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-magenta whitesmoke" href="#/">Combined</a>
<a class="btn btn-maroon dropdown-toggle" data-toggle="dropdown" href="#/"><i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu dropdown-maroon">
<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>
<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="#/"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#/"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#/"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#/"><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>
</div>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{margin-top:20px;
background:#eee;
}
.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
}