JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">
    <img src="http://sigerous-server.ru/new_design/but/but.gif" />
    <img src="http://sigerous-server.ru/new_design/but/but1.png" />
</div>

CSS

div{
    position: relative;
    width: 141px;
    height: 76px;
    overflow: hidden;
}

div img{
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    opacity: 0;
}
div img:first-child{
    opacity: 1
}

div:hover img{
    opacity: 1;
}
div:hover img:first-child{
    opacity: 0;
}