JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="coloured border-radius">Button</a>
<a href="#" class="coloured border-radius red">Button</a>
<a href="#" class="coloured border-radius blue">Button</a>
<a href="#" class="coloured border-radius white">Button</a>
<a href="#" class="coloured border-radius green">Button</a>

CSS

body {background:url(http://community.seas.columbia.edu/cslp/resources/spring07/Brushed%20Metal.jpg);}         

.coloured {
            display:block;
            padding:7px;
            float:left;
            text-align:center;
            margin-top:10px;
            margin:10px;
            -moz-transition:all 0.1s linear;
            -webkit-transition:all 0.1s linear;
            transition:all 0.1s linear;
            font-family:Helevetica, Arial, sans-serif;
            width:118px;
            -webkit-box-shadow: inset -10px 10px 40px 5px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(255,255,255,0.2);
            -moz-box-shadow: inset -10px 10px 40px 5px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(255,255,255,0.2);
            box-shadow: inset -10px 10px 40px 5px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(255,255,255,0.2);
            color:#d0d0d0;
            background:#F8B70B;
            font-weight:bold;
            text-decoration:none;
    font-size:14px;
            }


            .coloured:hover {
            -webkit-box-shadow: inset 0px 10px 40px 5px rgba(0, 0, 0, 0.3), 0px 0px 0px 3px rgba(255,255,255,0.2);
            -moz-box-shadow: inset 0px 10px 40px 5px rgba(0, 0, 0, 0.3), 0px 0px 0px 3px rgba(255,255,255,0.2);
            box-shadow: inset 0px 10px 40px 5px rgba(0, 0, 0, 0.3), 0px 0px 0px 3px rgba(255,255,255,0.2);
color:#fff;    
            }

.border-radius {
              -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;  
}

.red {background:#8d1f1f}
.blue {background:#0688ed}
.green {background:#54b017}
.white {background:#f0f0f0;color:#333}
.white:hover {color:#000;}