button.html

<input type="submit" value="Submit" class="button-hover" />

hover.js

$(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)
  });
})

style.css

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;
}