JSFiddle - React, Tailwind, and code Playground

Bootstrap Button Colors http://codepen.io/jenniferperrin/pen/GkjJI

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-info btn-lg">Large button</button>
<button type="button" class="btn btn-success btn-lg">Large button</button>
<button type="button" class="btn btn-warning btn-lg">Large button</button>
<button type="button" class="btn btn-danger btn-lg">Large button</button>
<hr />
<button type="button" class="btn btn-default">Default button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-info">Default button</button>
<button type="button" class="btn btn-success">Default button</button>
<button type="button" class="btn btn-warning">Default button</button>
<button type="button" class="btn btn-danger">Default button</button>
<hr />
<button type="button" class="btn btn-default btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-info btn-sm">Small button</button>
<button type="button" class="btn btn-success btn-sm">Small button</button>
<button type="button" class="btn btn-warning btn-sm">Small button</button>
<button type="button" class="btn btn-danger btn-sm">Small button</button>
<hr />
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-info btn-xs">Extra small button</button>
<button type="button" class="btn btn-success btn-xs">Extra small button</button>
<button type="button"...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body { margin: 20px 10px; }

.btn {
    margin: .2em .1em;
    font-family:"Open Sans", sans-serif;
    font-weight: 300;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border: none;
    border-bottom: .15em solid black;
    border-radius: 3px;
    padding: 0.65em 1.3em;
}
.btn-lg {
    padding: 1em 2em;
}
.btn-sm, .btn-xs {
    font-size: .85em;
    padding: .5em 1em;
}
.btn-xs {
    font-size: .85em;
    padding: .25em .75em;
}
.btn-default {
    border-color: #d9d9d9;
    background-image: linear-gradient(#ffffff, #f2f2f2);
}
.btn-default:hover {
    background: linear-gradient(#f2f2f2, #e6e6e6);
}
.btn-primary {
    border-color: #15405d;
    background-image: linear-gradient(#236b9b, #1e5d86);
}
.btn-primary:hover {
    background: linear-gradient(#1e5d86, #1a4e71);
}
.btn-success {
    border-color: #4f8017;
    background-image: linear-gradient(#77c123, #6aab1f);
}
.btn-success:hover {
    background: linear-gradient(#6aab1f, #5c961b);
}
.btn-info {
    border-color: #287ab0;
    background-image: linear-gradient(#4da0d7, #3895d2);
}
.btn-info:hover {
    background: linear-gradient(#3895d2, #2c88c5);
}
.btn-warning {
    border-color: #9e770c;
    background-image: linear-gradient(#e5ad12, #cd9b10);
}
.btn-warning:hover {
    background: linear-gradient(#cd9b10, #b6890e);
}
.btn-danger {
    border-color: #913510;
    background-image: linear-gradient(#d64e18, #bf4615);
}
.btn-danger:hover {
    background: linear-gradient(#bf4615, #a83d13);
}