JSFiddle - React, Tailwind, and code Playground
HTML
<button id="reset" type="button">Reset</button>
CSS
button {
display: inline-block;
margin: 0;
padding: 15px 20px;
color: #fff;
vertical-align: middle;
text-align: center;
line-height: 20px;
font-size: 14px;
text-transform: uppercase;
font-family: @font_button;
outline: none;
color: #fff;
background-color: #2980b9;
border: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color 0.1s ease;
-moz-transition: background-color 0.1s ease;
-ms-transition: background-color 0.1s ease;
-o-transition: background-color 0.1s ease;
transition: background-color 0.1s ease;
}
button:focus {
background-color: @app_color_default_focus;
}
button:hover {
background-color: #2573a7;
}
button:active {
color: #fff;
background-color: @app_color_default;
-webkit-transform: scale(0.95);
-moz-transform: scale(0.95);
-ms-transform: scale(0.95);
-o-transform: scale(0.95);
transform: scale(0.95);
}
button[disabled] {
background-color: #999;
pointer-events: none;
}
JavaScript
$('#reset').click(function(){
$(this).attr('disabled',true);
});