Hover em botão de imagem

by Ivan Ferrer

HTML

<script src="http://4.bp.blogspot.com/-YaZt4wMAc9A/Ttg32qWM5zI/AAAAAAAAA0A/L0a46MZTXe8/s1600/Download-Button-With-Hover.jpg"></script>
<div class="botao">
    <a href="#" class="troca"><span>Download</span></a>
</div>

CSS

.botao a.troca span{
    display:none;
}
.botao a.troca {
  background:url('http://4.bp.blogspot.com/-YaZt4wMAc9A/Ttg32qWM5zI/AAAAAAAAA0A/L0a46MZTXe8/s1600/Download-Button-With-Hover.jpg') center top no-repeat;
    width:500px;
    height:64px;
    display:block;
}
.botao a.troca:hover {
    background-position: bottom;
    width:500px;
    height:64px;
    display:block;
}