Fade transition on a link with background sprite

fade-hover-sprite.css

a.bouton {
    background: url(sprites.png) no-repeat;
    background-position: 0 0;
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;    
}
 
a.bouton:after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: url(sprites.png) no-repeat;
    background-position: -30px 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;
}
 
a.bouton:hover:after {
    opacity: 1;
}