JSFiddle - React, Tailwind, and code Playground
by dwynings
HTML
<a href="#" class="hn-button">Like</a>
CSS
.hn-button:before {
content:'Y';color: #FFF;
background: #ff6600;
position: absolute;
margin-top: 3px;
margin-left: 4px;
padding-right: 3px;
padding-left: 3px;
}
.hn-button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #ff6600;
text-decoration: none;
background: rgb(250,250,250);
background: -moz-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(234,234,234,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,250,250,1)), color-stop(100%,rgba(234,234,234,1)));
background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(234,234,234,1) 100%);
background: -o-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(234,234,234,1) 100%);
background: -ms-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(234,234,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#eaeaea',GradientType=0 );
background: linear-gradient(top, rgba(250,250,250,1) 0%,rgba(234,234,234,1) 100%);
font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
/*border: 1px solid rgba(66,66,66,0.32);*/
border: 1px solid #d2d0ce;
padding: 2px 4px 2px 20px;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
}
.hn-button:hover {
border: 1px solid rgba(66,66,66,0.52);
}
.hn-button:active {
background: rgb(234,234,234);
background: -moz-linear-gradient(top, rgba(234,234,234,1) 0%, rgba(250,250,250,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(250,250,250,1)));
background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(250,250,250,1) 100%);
background: -o-linear-gradient(top, rgba(234,234,234,1)...