JSFiddle - React, Tailwind, and code Playground
by JordanBlount
HTML
<button>Find My Sites</button>
CSS
body {
background:#292E30;
margin:30px;
}
button {
margin:0;
padding:6px 18px 7px;
display:inline-block;
vertical-align:top;
text-decoration:none;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-weight:bold;
font-size:11px;
border-radius:15px;
-webkit-font-smoothing: antialiased;
cursor:pointer;
color:#969C9F;
background-color: #2A2F31;
background-image: -webkit-gradient(linear, left top, left bottom, from(#303538), to(#252A2C));
background-image: -webkit-linear-gradient(top, #303538, #252A2C);
background-image: -moz-linear-gradient(top, #303538, #252A2C);
background-image: -ms-linear-gradient(top, #303538, #252A2C);
background-image: -o-linear-gradient(top, #303538, #252A2C);
background-image: linear-gradient(top, #303538, #252A2C);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#303538', EndColorStr='#252A2C');
text-shadow:0 -1px 0 #1A1E1F;
border:1px #202426 solid;
border-top:1px #252A2B solid;
border-bottom:1px #1A1E1F solid;
box-shadow:0 1px 0 rgba(0,0,0,.07), inset 0 1px 0 #3F4446;
}
button:hover {
box-shadow:0 1px 0 rgba(0,0,0,.07), inset 0 1px 0 #464D4F;
background-color: #313739;
background-image: -webkit-gradient(linear, left top, left bottom, from(#383F42), to(#2A2F31));
background-image: -webkit-linear-gradient(top, #383F42, #2A2F31);
background-image: -moz-linear-gradient(top, #383F42, #2A2F31);
background-image: -ms-linear-gradient(top, #383F42, #2A2F31);
background-image: -o-linear-gradient(top, #383F42, #2A2F31);
background-image: linear-gradient(top, #383F42, #2A2F31);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#383F42', EndColorStr='#2A2F31');
color:#a8afb3;
}
button:active {
background-color: #2A2F31;
background-image: -webkit-gradient(linear, left top, left bottom, from(#303538), to(#252A2C));
background-image: -webkit-linear-gradient(top, #303538, #252A2C);
background-image:...