JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.botao {
    background:url(http://i.stack.imgur.com/5PWNy.png) 0 0;
	color: #fff;
    padding:10px;
	border-bottom: 1px solid #000;
	box-shadow: 0 1px 0 transparent;
	-moz-box-shadow: 0 1px 0 transparent;
	-webkit-box-shadow: 0 1px 0 transparent;
	position:relative;
	font-family: Tahoma, Geneva, sans-serif;
	z-index:0;
    -webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s; 
}
.botao:hover {
    background-position: 0 -50px;
    -webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s; 
}
.botao:active {
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
-webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
-moz-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
-ms-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
-o-transition: inset 0px 0px 10px rgba(0, 0, 0, 0.76);
}

a {text-decoration:none;}