Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<input type="submit" value="Submit" class="button-hover" />
$(document).ready(function(){
$('input.button-hover').wrap('<div class="button-wrap"></div>');
$('input.button-hover').hover(function() {
$(this).stop().animate({ // Fade the button out when hovered
'opacity': 0.01
}, 500)
}, function() {
$(this).stop().animate({ // Fade it back in on mouseout
'opacity': 1
}, 500)
});
})
input.button-hover {
background: transparent url(button.png) no-repeat left top;
border: none;
padding: 0;
display: block;
height: 30px; /* Set to height of image */
width: 100px; /* Set to width of image */
text-indent: -9999px;
font-size: 1px;
}
.button-wrap {
background: transparent url(button-hover.png) no-repeat left top;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment