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

CSSでボタン風にリンクを作るで紹介したように、divタグでblock要素にすると、CSSを使って簡単にボタン画像風にリンクを作ることができますが、それだけだと立体感や、“つるっ”と感は中々出ません。

そこで、ちょっとした工夫で立体的に見せる方法です。
立体的に見せるということは、光と影を作るということです。
つまり、左及び上のborderをbackgroundの色より少し明るい色、右及び下のborderを暗い色にすると、立体感がでます。
例です。

 ---CSS---
 .menu div	{font-size:12px;

color:#333333;
line-height:130%;
font-family:sans-serif;
text-align:left;
vertical-align:top;
border-top:solid 1px #ffffff;

 		 border-left:solid 1px #ffffff;

border-right:solid 1px #999999;
border-bottom:solid 1px #999999;
margin-top:0px;

 		 display:block;

}

 .menu a{color:#333333c;

text-decoration:none;
display:block;

 		 width:138px;
 		 padding-top:3px;

padding-bottom:3px;
padding-left:10px;
padding-right:5px;
}

 .menu a:hover{background:#AFBEFA;

color:#000000;
}

 --html---
 <td class="menu" ><div><a href="#.html">サンプル1</a></div>
 <div><a href="#.htm">サンプル2</a></div>
 <div><a href="#.htm">サンプル3</a></div></td>

最後の.menu a:hoverは、マウスを重ねた時に背景色が変わるようになっています。
また、全体的にこの背景に、グラデーションなどの画像を配置すると、より画像ボタン風のつるっとした立体的な感じがでます。

最近だと、CSS3を使って、次のように作った方がいいかもしれませんね。
CSS3 グラデーションボタンを作る