ボタンに見えるリンクのスタイルシート具体例


ボタン風に見えるリンクに関してのスタイシートの具体的な書き方です。
画像を使わず、スタイルシートで指定するだけで、ロールオーバーボタン風のものが作れます。 Javascript を使った本物とはやはり差が有りますが、画像を使っていない分、反応は早くなります。


TOPページに戻る   文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
ボタン風に見えるリンクスタイルシート具体例       
クリックの前後で、ボタンの形状と色を変える
画像を使わず、スタイルシートで指定するだけで、ロールオーバーボタン風のものが作れます。 Javascript を使った本物とはやはり差が有りますが、画像を使っていない分、反応は早くなります。

リンクのサンプル

リンクサンプル リンクサンプル リンクサンプル
リンクサンプル
リンクサンプル
リンクサンプル


作り方

上記サンプルは次のように書いています


<html><head><title></title>
<Style type="text/css">
<!--
a:link.midori { color: #005500;  ←文字の色を指定
          background-color: #aaeeaa;  ←枠の中の色を指定
          text-decoration: none;  ←リンク部アンダーラインの有無を指定
          border:4px outset; padding: 2px 20px 2px 20px;}  ←枠の太さ・形状・余白を指定
a:link.ao { color: #005500;
          background-color: #aaaaee;
          text-decoration: none;
          border:4px outset; padding: 2px 20px 2px 20px;}
A:visited { color: #666666;
          background-color: yellow;
          text-decoration: none;
          border:4px inset; padding: 2px 20px 2px 20px;}
A:active { color: #FF0000;
          background-color: pink;
          text-decoration: underline;
          border:4px inset; padding: 2px 20px 2px 20px;}
A:hover { color: #FFFFFF;
          background-color: red;
          text-decoration: none;
          border:4px outset; padding: 2px 20px 2px 20px;}
-->
</STYLE>
</head><BODY>
<DIV style="line-height:200%">  ←行間を調整する
<A class="midori" href="aaa.htm">リンクサンプル</a>
<A class="midori" href="bbb.htm">リンクサンプル</a>
<A class="midori" href="ccc.htm">リンクサンプル</a>
<Br><A class="ao" href="dd.htm">リンクサンプル</a>
<Br><A class="ao" href="ee.htm">リンクサンプル</a>
<Br><A class="ao" href="ff.htm">リンクサンプル</a>
</DIV></body></html>

上に戻る TOPページに戻る 前に戻る