JSFiddle - React, Tailwind, and code Playground
by g30rg3
HTML
<button id="btnCompare" type="button" class="btn-blue">Compare</button>CSS
.btn-blue {
width: 125px;
height: 27px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #156399; /* layer fill content + color overlay */
}
.btn-blue:hover{
width: 123px;
height: 25px;
border: 1px solid #156399; /* stroke */
border-radius: 3px; /* border radius */
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #fff; /* layer fill content */
box-shadow: 0 1px 1px rgba(0,0,0,.3); /* drop shadow */
background-image: linear-gradient(bottom, #156399 0%, #2f77a7 100%); /* gradient overlay */
}
.btn-blue:active{
width: 123px;
height: 25px;
border: 1px solid #156399; /* stroke */
border-radius: 3px; /* border radius */
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #fff; /* layer fill content */
box-shadow: 0 1px 0 #fff, inset 0 1px 2px rgba(0,0,0,.2); /* drop shadow and inner shadow */
background-image: linear-gradient(bottom, #156399 0%, #2f77a7 100%); /* gradient overlay */
}