JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#">Twitter Me</a>
<a href="#">Download</a>
<a href="#">Tube me</a>
CSS
/* Credit goes to Nathan Powell for the design this is based on: http://forrst.com/posts/Dark_button_theme-Tqk */
body {
background: #343434;
padding: 50px 60px;
}
a {
display: block;
font-family: helvetica;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #DDD;
padding: 8px 0;
text-align: center;
border: solid 1px #171717;
width: 170px;
background: #605d5d; /* Old browsers */
background: -moz-linear-gradient(top, #605d5d 0%, #2b292a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#605d5d), color-stop(100%,#2b292a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #605d5d 0%,#2b292a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #605d5d 0%,#2b292a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #605d5d 0%,#2b292a 100%); /* IE10+ */
background: linear-gradient(top, #605d5d 0%,#2b292a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#605d5d', endColorstr='#2b292a',GradientType=0 ); /* IE6-9 */
float: left;
margin-right: 25px;
margin-bottom: 25px;
box-shadow: 0px 1px 0px #8D8988 inset,
1px 0px 0px #494748 inset,
-1px 0px 0px #494748 inset,
0px -1px 0px #3A3839 inset,
-2px -2px 0px #3D3B3C inset,
2px 2px 0px #3D3B3C inset,
0px 1px 1px #2a2a2a;
text-shadow:0 0 1px #888;
outline: none;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
a:hover {
border-color: #000;
box-shadow: 0px 1px 0px #8D8988 inset,
1px 0px 0px #494748 inset,
-1px 0px 0px #494748 inset,
0px -1px 0px #3A3839 inset,
-2px -2px 0px #3D3B3C inset,
2px 2px 0px #3D3B3C inset,
0px...