JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="link">
<div id="link-gif"> </div>
</div>
CSS
#link-gif {
width:150px;
height:40px;
border:1px solid #39464E;
background-image:url('http://i.imgur.com/YgLJoVH.png');
background-size:contain;
background-repeat:no-repeat;
background-position:bottom center;
cursor:pointer;
}
JavaScript
$(function() {
$("#link-gif").hover(
function() {
$(this).css("background-image", "url('http://i.imgur.com/HhsBws5.gif')");
},
function() {
$(this).css("background-image", "url('http://i.imgur.com/WLFzz3S.gif')");
}
);
});