ボタン風に見えるリンク 


画像を使わず、スタイルシートで指定するだけで、ロールオーバーボタン風のものが作れます。 Javascript を使った本物とはやはり差が有りますが、画像を使っていない分、反応は早くなります。
なおこれは正しい使い方では有りませんので、 WINDOWSプラスIE 以外では表示が変化します。
しかし考え方次第で、表示が変化するといっても最悪でも普通のリンクになるだけですから、ほとんど大多数の人が 使っている環境できちんと表示できる分もうけものと考えれば使う価値はあります。
A:link.button{ background-color: #aaeeaa; border:4px outset;}
A:active.button{ background-color: pink; border:4px inset;}
A:visited.button{ background-color: yellow; border:4px inset;}
A:hover.button{ background-color: red; border:4px outset;}

background-color: の色を変えればボタンの色、border:4px inset; の数字を変えれば ボタンの出っ張り量、 inset だとへこみ outset だととびだします。
text-decoration: none; を追加すればリンク部のアンダーラインがなくなり、 color: #005500; 等を追加すれば 文字の色が変わります。 padding: 2px 20px 2px 20px; 等を追加すれば文字と枠のクリアランスを変えられます。
A:link の所に書いた内容が、まだクリックしてないリンク部に適用され、
A:active の内容は、リンク中の文字部に適用されます。
A:visited の内容は、既にクリックしたリンク部に適用され、
A:hover の所に書いた内容は、リンク上にマウスカーソルを載せたときの内容になります。

上の実施例は次のような表記になっています。
記入例
HEADタグの間に次の指定をします
<Style type="text/css">
<!--
A:link.button{ color: #005500; background-color: #aaeeaa; text-decoration: none; border:4px outset; padding: 2px 20px 2px 20px;}
A:active.button{ color: #FF0000; background-color: pink; text-decoration: underline;border:4px inset; padding: 2px 20px 2px 20px;}
A:visited.button{ color: #666666; background-color: yellow; text-decoration: none; border:4px inset; padding: 2px 20px 2px 20px;}
A:hover.button{ color: #FFFFFF; background-color: red; text-decoration: none; border:4px outset; padding: 2px 20px 2px 20px;}
-->
</STYLE>
そして本文を次のように書きます
<A CLASS="button" href="aa.htm" target="_blank">リンクサンプル</a>
<A CLASS="button" href="bb.htm" target="_blank">リンクサンプル</a>
<A CLASS="button" href="cc.htm" target="_blank">リンクサンプル</a>



TOPページに戻る