JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="button">Add to cart</a>

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold);

body { padding: 100px;}

.button {
    display: block;
    width: 160px;
    padding: 12px 20px;            
    position: relative;
    font: bold 13px/1 "Droid Serif", Georgia, serif;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 -1px 0 #006902;
    text-align: center;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
    border:  solid 1px #006902;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    cursor: pointer;
    background: #01A602;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01DE04), to(#01A802), color-stop(.6, #01A602));
    background: -moz-linear-gradient(100% 0% 270deg, #01DE04, #01A802, #01A602 100%);
    opacity: .75;
    -webkit-transition: background-image, opacity .75s ease-in;
    -moz-transition: background-image, opacity .75s ease-in;
    -webkit-transition: background-image, opacity .75s ease-in;
}

.button:hover { opacity: 1; }

.button:after {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    bottom: -2px;
    width: 204px;
    height: 3px;
    background: rgba(0, 0, 0, .25);
    box-shadow: 0 0 5px #999;
    -moz-box-shadow: 0 0 5px #999;
    -webkit-box-shadow: 0 0 5px #999;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}