JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="button" title="Buy Now">Buy Now</a>

CSS

* {
    margin: 10px;
}

.button {
    padding: 5px 10px;
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    color: white;
    text-shadow: 0 -1px 1px rgba(0,0,0,.3);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52A8E8), to(#377AD0));
    background-image: -moz-linear-gradient(0% 100% 90deg, #377AD0, #52A8E8);
    background-color: #52A8E8;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    -o-border-radius: 23px;
    border-radius: 23px;
    border: 1px solid #20559A;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -o-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.button:hover, .button:focus {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#54A1D8), to(#1967CA));
    background-image: -moz-linear-gradient(0% 100% 90deg, #1967CA, #54A1D8);
    background-color: #52A8E8;
    color: white;
}

.button:active {
    background: #2D7CD1;
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.5), 0 1px 1px rgba(255,255,255,.7);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -o-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    color: white;
}