CSS

.button_home {
   height: 64px;
   width: 320px;
   background-image: url(img/button2.png);
   position: absolute;
   text-align: center;
   padding-top: 36px;
}
.button_home a {
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   background-image: url(img/button2.png);
   background-repeat: no-repeat;
   margin-top: -36px;   
}
.button_home a:hover {
   background-image: url(img/button3.png);
}

HTML

<ul>   
    <li>
      <div class="button_home">
        <a name="Home" href="#">Главная</a></div>
          </li>
         </ul>

(function() {
$("div.button_home a").css("opacity","0");
});
$(function(){
        $('div.button_home a')
    .css({ 'backgroundImage':'url("img/button3.png")'})     
    .hover(function(){
              $(this)
               .stop()
              .animate({ 'opacity': 1}, 500);},
    function(){
              $(this)
                .stop()
                .animate({'opacity': 0 }, 500); });
});