Criei um link com um efeito de transição, porém não acontece um fade
, mas sim um movimento do background.
HTML
<a class="botao" href="#">Contrate agora</a>
CSS
.botao {
background:url(https://i.sstatic.net/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;}
Como eu faço para que ocorra o efeito fade
na transição do background.?