フォームのボタンをカスタマイズする場合にオーソドックスなのは、

  1. type=”image” を使う
  2. inputやbutton要素のbackground-imageを指定する

の2つなんだけど、buttonタグの中にボタンにしたい画像をそのまま入れる手もある。

普通に入れたらこうなるけれども、

CSSをちょっと弄れば…

中の画像入れ替えるだけでokな代物に。

XHTMLのソースは至って普通。

<button type="reset"><img src="button.png" alt="button" width="160" height="30" /></button>

CSSは次の通り。

button {
	width: auto;
	padding:0;
	margin:0;
	background:none;
	border:0;
	font-size:0;
	line-height:0;
 	overflow:visible;
	cursor:pointer;
}

border:0　と　background:none　でブラウザデフォルトのボタンは姿を消すものの、
buttonタグはIE7以下の挙動がちょっとおかしくて、横幅なんかが倍くらいになってしまう為
width: auto　と　overflow:visible　は必須。