Javascriptも画像ファイルも使わずにボタンっぽく見せる方法

　Ｗｅｂページ上のリンク等で、リンクボタンもしくはリンクテキストの上にマウスカーソルを持っていくと見た目が変わるようなページってあるよね。そういうページって大体はJavascriptと画像ファイルを駆使して作成されている（もしくはflash等のもっと高度な技術を使っている）ことが多いのだが、今回はHTMLとcssだけでボタンっぽく見せる方法を紹介する。

サンプルはここ。

　どうやってるかは、上のリンク先のソースを見てください。･･･というのは不親切すぎるのでちょっと解説。

　ここではcss(カスケードスタイルシート)を利用している。その定義部分はこうだ。

span.button{font-size:120%;}
span.button a{margin:3px;padding:2px;border:2px outset #ffcc99;background:#ffcc99;}
span.button a:hover{margin:4px;padding:2px;border:1px outset #ffcc99;background:#ffcc66;font-style:bold;}

ここではスタイルシート定義の部分で button というクラスを定義している。１行目は文字の大きさなので、この辺は好みにあわせて定義してください。

２行目はマウスオーバーされていないときの定義。３行目はマウスオーバーされたときの定義である。a タグに関してはこのようにcss でマウスが無いときとあるときの２通りの定義ができる。このことを利用してマウスオーバーで見た目を変えることができる。

実際のボタンは以下のように上記のcss定義でしていしたクラス名にしておく。

<span class="button">
 <A HREF="sample.html">ボタンＡ</A>  <A HREF="sample.html">ボタンＢ</A>  <A HREF="sample.html">ボタンＣ</A>
</span>

ここでボタンっぽくするコツは border 属性である。枠の種類は outset にするのが最もボタンぽく見える。ここで、マウスオーバーあり時と無し時で margin 属性と border 属性の値の合計値が等しくなるように設定すれば、マウスを乗せても枠の太さだけが変わるだけで位置はずれずに済みます。色とかはお好みでデザインしてください。

ちなみにサンプルページの３行目のボタンはマウスオーバー時に、枠線が inset になるように設定してある。こちらの方がよりダイナミックに凹んだように見える。

cssのソースは以下の通り、hover の方だけ border を「inset」とする。

span.button3{font-size:100%;}
span.button3 a{margin:3px;padding:2px;border:5px outset #6699ff;background:#6699ff;}
span.button3 a:hover{margin:5px;padding:2px;border:3px inset #6699ff;background:#5588ff;font-style:bold;}

なお、枠の色が濃すぎると Firefox などの Gecko 系のブラウザではちゃんとボタンっぽく見えるが、IE系のブラウザで見ると見た目が汚くなってしまう（以前はfirefoxでしか確認してなかったので汚いサンプルを作っていた）。枠の色は本体と同系色で同程度の明るさの色がいいだろう。

ちなみに、サンプル以外でも実際に私のページでこの方法を使ってみた。大日本珍名馬百科でも本編の上の方のナビゲーションが、その実例である。