takumadesign

CSS イメージボタン

HTML で作成されるフォームのボタンは、OS やブラウザによってデザインが異なる。サイトのデザインとボタンを統一させたい時や、ボタンに文字ではなくアイコンを使用したい時がある。そんな時まず思いつくのは image ボタンを使用する方法だ。

<input type="image" src="button.png" alt="検索" />

この方法は、src 属性で画像の URI を指定して画像を表示するが、画像を使わない方法でボタンを作成し、そのボタンを CSS で image ボタンのように見せることはできないだろうか。CSS でサイトのデザインをする際、見出しなどのテキストと背景画像を置き換えるテクニックがよく使用される。同様にこのテクニックをボタンにも使用できないか試みた。

表示確認は IE 6、Firefox 1.5、Netscape 7.1、Opera 9、Safari 2、Mac IE 5.2 で行った。

input 要素ボタン

input 要素の type 属性の値を submit に指定したボタンを使う。type 属性の値が reset や button の場合でも同じ。

<input type="submit" value="検索" class="button" />

CSS でボーダーを消し、背景に画像を表示し、テキストを text-indent で見えない位置へ移動する。cursor の値を pointer にすれば、カーソルを画像ボタンにマウスオーバーした時と同じ形状にすることができる。

.button {
  width: 46px;
  height: 20px;
  border: 0;
  background: url(button.png) no-repeat 0 0;
  text-indent: -9999px;
  cursor: pointer;
}

ボタンのラベルとして表示するテキストは、value 属性の値なので text-indent は適用されないと思っていたが、IE、Firefox、Netscape では適用され背景画像と置き換わった。
しかし、Opera と Mac IE ではテキストが見えたままで、Safari では背景画像も表示できない。テキストはそのままラベルとして使うほうが良さそう。

次に input 要素の代わりに button 要素を使用したボタンで試した。

button 要素ボタン

button 要素は、ボタン専用の要素で input 要素で作成されるボタンと機能的には同じ。この要素は内容をラベルとして表示する。

<button type="submit" class="button">検索</button>

CSS は input 要素ボタンの時と同じスタイルを指定する。

.button {
  width: 46px;
  height: 20px;
  border: 0;
  background: url(button.png) no-repeat 0 0;
  text-indent: -9999px;
  cursor: pointer;
}

button 要素を使えば Safari でも背景画像が表示でき、Opera でもテキストが見えなくなった。しかし、まだ Mac IE 5 ではテキストが表示されたままなのでバックスラッシュハックを使って Mac IE にだけ letter-spacing を指定する。

/*\*//*/
.button {
  letter-spacing: -9999px;
}
/**/

この方法で表示確認を行ったすべてのブラウザでテキストを背景画像に置き換えることができた。

実際に作成したイメージボタンのサンプル。

CSS でボタンをデザインする際、背景画像を表示してテキストをそのままラベルとして使う時は input 要素を使用し、テキストを見えなくする時は button 要素を使用するのが良さそう。しかし、button 要素は Netscape 4 に対応していないので注意。

2006-09-30 17:59 コメント (2) css, design, web