JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="botao"><span>Contrate agora</span><span></span></a>

CSS

.botao {
	display: inline-block;
	position: relative;	
    width:120px;
    height:30px;
    
    text-align:center;
    text-decoration:none;
    color:#FFF;
	background: url(http://i.stack.imgur.com/5PWNy.png) repeat-x;
}
.botao span:first-child{
    z-index:30;
    position:absolute;
    display:block;
    left:0;right:0;margin:auto;
    margin-top:5px;
}

.botao span:last-child{z-index:29;
	position: absolute;  z-index:0;  
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(http://i.stack.imgur.com/5PWNy.png) repeat-x;
	background-position: 0px -50px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}
.botao:hover span {
	opacity: 1;
}