CSSでボタン風にリンクを作る

Webサイト作成 TIPS
css

CSSでボタン風にリンクを作る1

Webサイト作成時、画像をいかに作るかはユーザーナビゲーションの大事な部分ですが、画像はメンテナンスが面倒（その都度画像ソフトで編集しなければならない）であったり、専門的な知識が必要だったりします。

そこで、CSSを使ってボタン風に表示することができます。
オンラインコンサルタントのサイトの左バーで使っている方法です。

 --css--
 .side div	{font-size:12px;

font-weight:bold;
border-bottom:solid 1px white;

                }
 .side a{color:#444444;

text-decoration:none;

         display:block;
         padding-top:8px;

padding-bottom:8px;
padding-left:12px;
padding-right:0px;}

 .side a:hover	{color:#000000;
                 background-color:#FFE4E1;}

 --html--
 <td class="side" >
 <div><A href="system.htm">利用方法</a></div>
 <div><A href="/target/beginner.htm">初心者の方へ</a></div>
 <div><A href="/target/sylver.htm">高齢者の方へ</a></div>
 <div><A href="/target/buisiness.htm">ビジネスユーザーへ</a></div>
 ・・・以下略

最後のa:hoverはマウスを重ねた時に、背景色が変わるような効果です。
例えば、もっと立体的に見せる方法もあります。
→CSSでボタン画像風にリンクを作る