JSFiddle - React, Tailwind, and code Playground

Buttons for Reside

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">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

CSS

body {
    margin: 20px 40px;
}
.btn-default {
    background-color: hsl(0, 0%, 87%) !important;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dddddd", endColorstr="#dddddd");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#dddddd), to(#dddddd));
    background-image: -moz-linear-gradient(top, #dddddd, #dddddd);
    background-image: -ms-linear-gradient(top, #dddddd, #dddddd);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #dddddd));
    background-image: -webkit-linear-gradient(top, #dddddd, #dddddd);
    background-image: -o-linear-gradient(top, #dddddd, #dddddd);
    background-image: linear-gradient(#dddddd, #dddddd);
    border-color: #dddddd #dddddd hsl(0, 0%, 87%);
    color: #333 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.00);
    -webkit-font-smoothing: antialiased;
}
.btn-primary {
    background-color: hsl(195, 60%, 40%) !important;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2884a3", endColorstr="#2884a3");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#2884a3), to(#2884a3));
    background-image: -moz-linear-gradient(top, #2884a3, #2884a3);
    background-image: -ms-linear-gradient(top, #2884a3, #2884a3);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2884a3), color-stop(100%, #2884a3));
    background-image: -webkit-linear-gradient(top, #2884a3, #2884a3);
    background-image: -o-linear-gradient(top, #2884a3, #2884a3);
    background-image: linear-gradient(#2884a3, #2884a3);
    border-color: #2884a3 #2884a3 hsl(195, 60%, 40%);
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.00);
    -webkit-font-smoothing: antialiased;
}
.btn-info {
    background-color: hsl(168, 74%, 26%) !important;
    background-repeat: repeat-x;
    filter:...

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0

// http://charliepark.org/bootstrap_buttons/