CSSでinput画像ボタンにロールオーバーをつける

input type="image"の送信ボタンにhover用の画像を背景に指定、hover時には透明度をゼロとし背景画像を表示しています。

JSでの実装はこちら↓
javascriptでinput画像ボタンにロールオーバーをつける【2012.08.16改訂】

HTMl

<form>
<div class="mod_formbtn">
<ul>
<li class="back"><input type="image" src="back.gif" alt="内容をクリア"></li>
<li class="send"><input type="image" src="send.gif" alt="確認する"></li>
</ul>
<!--mod_formbtn_end--></div>
</form>

CSS

.mod_formbtn{
	width:500px;
	text-align:center;
}
.mod_formbtn ul{
 letter-spacing:-0.4em;
 }
.mod_formbtn ul li{
 letter-spacing:normal;
 display:inline-block;
 *display: inline;
 *zoom: 1;
 margin:0 10px 0 10px;
}
.mod_formbtn ul li a{
  display:block;
 height:45px;
 overflow:hidden;
}

.mod_formbtn ul li.send{
 background:transparent url('send_on.gif') no-repeat left top;
}
.mod_formbtn ul li.back{
 background:transparent url('back_on.gif') no-repeat left top;
}
.mod_formbtn input:hover {
 opacity: 0.0;
 /* IE */
 filter: alpha(opacity=0);
}