スタイルシート（css）でボタン風リンク文字を表示する

アンカータグ(<a>タグ)を使って ホームページやブログなどのウェブサイトに リンクを貼る際に、スタイルシートを利用して、押すと凹むように見える ボタン風リンク文字を表示することができます。

 

リンク文字をクリックしてみてください。押すと凹んだように見えると思います。このソースは、次のようになっています。

 

ここでは、リンク文字にスタイルシートで枠と背景色を設定し、上枠と左枠を、背景色より薄い色に設定し、下枠と右枠を、背景色より少し薄い色に指定しています。これで、中央が浮き上がって、ボタンのように見せています。

逆に リンク中のスタイル a:active で、上枠と左枠とを 下枠と右枠の色とに入れ替えることで、クリックしたときに凹んだように見せています。

Code:
<style type="text/css">
<!--
.buttonlink a {

line-height:1.5em;
display:block;
width:120px;
height:18px;
text-align:center;
font-size:12px;
margin:3px;
text-decoration:none;
border-top:2px solid #96DD67;
border-left:2px solid #96DD67;
border-right:3px solid #30622F;
border-bottom:3px solid #30622F;
background-color:#71AA4B;
color:#FFF;
}

.buttonlink a:hover { color:lime; }

.buttonlink a:active {

border-top:3px solid #30622F;
border-left:3px solid #30622F;
border-right:2px solid #96DD67;
border-bottom:2px solid #96DD67;
}
-->
</style>

<div class="buttonlink">
<a href="#anc">ボタン風リンクA</a>
<a href="#anc">ボタン風リンクB</a>
</div>