CSS スタイルシート雑技 No. 6
画像を使わずボタンのようなリンクを作る (1)
画像も JavaScript も使わず、ボタンのようなリンクを作ってみましょう。
解説
一般的な角ボタンならば、 border を使う事で、 <img> による画像も、 onMouseOver による JavaScript も使わずに表現する事が出来ます。
<style type="text/css">
a{
background-color: #aaaaaa;
border-style: outset;
border-width: 2px;
border-color: #aaaaaa;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
a:hover{
background-color: #cccccc;
}
a:active{
background-color: #cccccc;
border-style: inset;
}
</style>
<a href="url">ボタンのようなリンク</a>
ポップアップウインドウに代表される、煩わしい JavaScript の使用方法なども影響し、通常は JavaScript をオフにしている利用者も増加しています。言ってみれば、「たかだかボタン画像の変化のためだけに、 JavaScript をオンにしなければいけないのは煩わしい」と考えている利用者にもリンクをボタンらしく見せる事が出来、かつ、 HTML 的にもシンプルに表現出来るというメリットを持っています。
この border と background を :link, :hover, :active, :visited で制御する方法を使うと、色々な応用が考えられますので、興味を持たれた方は研究を深めてみて下さい。