JSFiddle - React, Tailwind, and code Playground

HTML

<button id="tdb1" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-cart-checkout ui-state-hover" type="submit" role="button" aria-disabled="false" style=" ">
<span class="ui-button-icon-primary ui-icon ui-icon-cart"></span>
<span class="ui-button-text">Add to Cart</span>
</button>

CSS

.ui-priority-cart, .ui-priority-cart-checkout { background: url(http://i.imgur.com/vZL6n.jpg) repeat-x #39556e; font-weight:normal;  color:#fff; font-size:12px;  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.36); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.36);-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.36);  filter: progid:DXImageTransform.Microsoft.Shadow(Color=#dadada, Strength=5, Direction=90), progid:DXImageTransform.Microsoft.Shadow(Color=#dadada, Strength=5, Direction=180);}

.ui-priority-cart.ui-state-hover, .ui-priority-cart-checkout.ui-state-hover  {color:#fff !important; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16); -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16);-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16); background: url(http://i.imgur.com/hV3sO.jpg) repeat-x #26282c; }
    


.ui-corner-all { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; font-weight:normal; font-family:arial; font-size:14px; } /* the overflow property removes extra width in IE */
.ui-button .cart-checkout{ font-weight:bold; } 


/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4;  }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
.ui-priority-cart-checkout { padding: .7em 2em .7em 2em; } /*checkout button in cart */
/* no icon support for input elements, provide padding by...

JavaScript

$(document).ready(function(){  
     $('button').on("mouseenter",function(){
         $(this).fadeOut(100).toggleClass("ui-state-hover").fadeIn(100);
    });
});