input type submitでホバー時にボタンの画像を置換する方法をご紹介いたします。

使用する画像は下記になります。

「input.btn_submit」に必要なプロパティを記述します。「cursor: pointer;」はマウスカーソルを指の形にします。「display～height」までは画像置換する際に必要なプロパティです。submitボタンをブロック要素にし、通常時の画像の幅と高さを決めています。「border: none;」はsubmitが元々持っているボーダーを消去しています。「text-indent: -9999px;」はsubmitの「value=”送信”」の「送信」文字を画面外に飛ばしています。「background: url(btn_submit.gif) no-repeat 0 0;」で置換する画像を指定しています。

「input.btn_submit:hover」ではinput type submitにマウスカーソルがホバーした時に表示される画像の位置を「background: url(btn_submit.gif) no-repeat 0 -50px;」の「-50px」で決定しています。「-50px」は高さに対してマイナス50ピクセルを指定しています。こうすることによって画像の高さ-50pxから始まる画像を表示させています。

ただ、このやり方(background: url(btn_submit.gif) no-repeat 0 -50px;)はIE6では対応していませんので、別途javascriptなどで実現させる必要があります。

1
2
3
4
5
6
7
8
9
10
11
12
13

input.btn_submit {
  cursor: pointer;
  display: block;
  width: 150px;
  height: 50px;
  border: none;
  text-indent: -9999px;
  background: url(btn_submit.gif) no-repeat 0 0;
}
 
input.btn_submit:hover {
  background: url(btn_submit.gif) no-repeat 0 -50px;
}

submit要素に「class=”btn_submit”」とクラスを指定することで、上記のCSSのプロパティを割り当てています。

1

<input type="submit" name="btn_submit" value="送信" class="btn_submit" />

CSSだけで実現する場合はブラウザを選んでしまいますが、submitで画像を置換する場合の一つの選択肢になるのではないでしょうか。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13

input.btn_submit {
  cursor: pointer;
  display: block;
  width: 150px;
  height: 50px;
  border: none;
  text-indent: -9999px;
  background: url(btn_submit.gif) no-repeat 0 0;
}
 
input.btn_submit:hover {
  background: url(btn_submit.gif) no-repeat 0 -50px;
}

HTML

1

<input type="submit" name="btn_submit" value="送信" class="btn_submit" />