JSFiddle - React, Tailwind, and code Playground

by mich

HTML

<a class="buy-now" href="#"><span>Buy Now</span></a>

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
body { padding: 20px; font-family: "PT Sans"; }
.buy-now {
    width: 105px;
    height: 105px;
    display: block;
    position: absolute;
    
    background-color: #8EBD1E;
    -moz-border-radius: 55px;
    -webkit-border-radius: 55px;
    border-radius: 55px;
    border: solid 3px #8EBD1E;
    text-decoration: none!important;
    z-index: 2;
    -moz-box-shadow:
        0 0 1px 3px #B5D16F inset,
        0 3px 5px rgba(0,0,0,0.35);
    -webkit-box-shadow:
        0 0 1px 3px #B5D16F inset,
        0 3px 5px rgba(0,0,0,0.35);
    box-shadow:
        0 0 1px 3px #B5D16F inset,
        0 3px 5px rgba(0,0,0,0.35);
    -webkit-transition: all 250ms ;
    -moz-transition: all 250ms ;
    -o-transition: all 250ms ;
    transition: all 250ms;

}
.buy-now span {
    display: block;
    text-align: center;
    color: #f5f4f4;
    font-size: 30px;
    line-height: 30px;
    padding-top: 22px;
    text-shadow: 0px -1px 0px #536F11;
    -webkit-transition: all 250ms ;
    -moz-transition: all 250ms ;
    -o-transition: all 250ms ;
    transition: all 250ms;
}

.buy-now span:after {
    border-color: rgba(255, 255, 255, 0.15);
    border-style: double;
    border-width: 3px 0;
    content: "";
    display: block;
    height: 65px;
    left: 50%;
    margin-left: -10px;
    position: absolute;
    top: 18px;
    width: 20px;
}

.buy-now:hover {
    background-color: #6D9117;
    border-color: #6D9117;
    -moz-box-shadow:
        0 0 1px 3px #B5D16F inset,
        0 3px 5px rgba(0,0,0,0.65);
    -webkit-box-shadow:
        0 0 1px 3px #B5D16F inset,
        0 3px 5px rgba(0,0,0,0.65);
    box-shadow:
        0 0 1px 3px #B5D16F inset,
        0 3px 5px rgba(0,0,0,0.65);
}
.buy-now:hover span {
    text-shadow:
        0 0 5px #C7DE91,
        0px -1px 0px #536F11;
    color: #FFF;
}