JSFiddle - React, Tailwind, and code Playground

HTML

<button class="button brownb">My Buttons</button>

CSS

.brownb:active {
    background: -moz-linear-gradient(center top , #831516, #9B4141) repeat scroll 0 0 transparent;
    color: #FFFFFF;
}
.button:active {
    position: relative;
    top: 2px;
}
.brownb {
    background: -webkit-gradient(linear, left top, left bottom, from(#A55757), to(#831516));
background: -moz-linear-gradient(top, #A55757, #831516);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A55757', endColorstr='#831516');
    border: 1px solid #A55757;
    color: #D7D7D7;
}
.button {
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: inline-block;
    font: bold 14px/100% Arial,Helvetica,sans-serif;
    margin: 0 2px;
    outline: medium none;
    padding: 0.5em 2em 0.55em;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
}