JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<button>Test Button</button>
<br/><br/>
<button disabled>Test Button</button>
<br/><br/>
<div class="ie9">
    <button>Test Button</button>
</div>

CSS

button {
    text-shadow: 0 -1px 0 #001234; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 
    padding: 2px 5px; 
    font-weight: bold; 
    background-color: #0A5D9F; 
    background-image: -webkit-linear-gradient(bottom, #0A4D8F 50%, #1A7DBF); 
    background-image: linear-gradient(0deg, #0A4D8F 40%, #1A7DBF); 
    border: 1px solid #0A2D5F; 
    color: #fff; 
    margin: 5px; 
    border-radius: 2px; 
    cursor: pointer;}

.ie8 button, .ie9 button { 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QIWEiUsqE81aAAAABdJREFUCNdjYCAesDHBCHbCLASXdHXsACc7ALot51P4AAAAAElFTkSuQmCC); 
    background-repeat: repeat-x; 
    background-position: 0 0; }

button:hover, button:focus { 
    background-color: #0A3D7F; 
    background-image: -webkit-linear-gradient(bottom, #0A2D6F 50%, #1A5DAF); 
    background-image: linear-gradient(0deg, #0A2D6F 40%, #1A5DAF); }

button:disabled, button:disabled:hover, button:disabled:focus {
    background-color: #565656; 
    background-image: -webkit-linear-gradient(bottom, #444444 50%, #AAAAAA); 
    background-image: linear-gradient(0deg, #444444 50%, #AAAAAA);
    border-color: #333333; 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) inset; 
    color: #EEEEEE; 
    cursor: default; 
    text-shadow: 0 -1px 0 #222222; }