ブログでもだいたい使えるHTMLタグリファレンス

アンカータグ(<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>

リンク文字のスタイル指定について、基本は→『未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する』をご覧ください。

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

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

ランキングに参加中です! お役に立てたらクリックをお願いします→

ブログでもだいたい使えるHTMLタグ リファレンス

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