フォームボタンを画像にするためのスマートな方法

HTML・CSS, WEB制作の小技や機能 | 2013.04.18

モニターが大きくなったり、タブレットが普及してきたりで
WEBデザインの傾向も、「大き目・ゆったり」となってきているこの頃。

となると、フォームの送信や戻るボタンはデフォルトのものでなく
画像でデザインされた押しやすいボタンにしたい人も多いかと。

そこで、今、いちばんスマートに記述できると思われる
「フォームボタンを画像にする方法」を考えてみました。

ポイントは、htmlに書くソースをなるべく短くすることです。

【HTMLソース】
<input type=”submit” value=”” />

クラス名を指定するだけです。
widthとheightをinputタグに書く事もできるのですが、
某htmlチェッカーではエラーと言われます。
実際の動作上は全く問題はないと思いますが、コーダーとして気になるので・・・。

※typeは、buttonでもOKです。

【CSS】
input.btn{
background:url(img/btn.jpg);
width:200px;
height:40px;
border:0px;
cursor:pointer;
}

cursorでpointerを指定してあげると、
ボタンにカーソルを合わせたときに指アイコンになります。

スタイルの指定方法が
.btn_login
だとうまく効かないようです。

※追記
IE6、7だと画像が表示されないバグがあります。