JSFiddle - React, Tailwind, and code Playground

by Sachin Patel

HTML

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<div style = "width:100%; text-align:center; margin-top:20px;">
<span class="CSSButton">Click Me!</span>
</div>

CSS

.CSSButton {
border: 1px solid #79A854;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.1, #ABDC28), color-stop(0.9, #94C60F) );
background: -moz-linear-gradient( center top, #ABDC28 10%, #94C60F 90% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ABDC28', endColorstr='#94C60F');
background-color: #ABDC28;
-moz-box-shadow: inset 0px 1px 2px 0px #FFFFFF;
-webkit-box-shadow: inset 0px 1px  2px 0px #FFFFFF;
box-shadow: inset 0px 1px  2px 0px #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-shadow: 1px 1px 2px #000000;
font-weight: bold;
margin: 5px 5px;
padding: 6px 6px;
color: #FFFFFF;
letter-spacing: 1px;
font-family: 'Arial', sans-serif;
font-size: 16px;
width: 150px;
text-transform: capitalize;
text-align: center;
text-decoration: none;
cursor: pointer;
display: inline-block;
}
.CSSButton:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.1, #94C60F), color-stop(0.9, #ABDC28) );
background: -moz-linear-gradient( center top, #94C60F 10%, #ABDC28 90% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#94C60F', endColorstr='#ABDC28');
background-color: #94C60F;
position: relative;
    top: 1.5px;
left: -1.5px;
}
.CSSButton:active {
position: relative;
top: 3.5px;
left: -3.5px;
}