TOPページ >  スタイルシート(CSS)の記述 > スタイルシートでボタン風リンク文字を表示する

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

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

サンプルです。

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

<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>

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

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

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

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

同一カテゴリ内一覧
テーブルの余白などのスタイルを指定する
スタイルシートでボタン風リンク文字を表示する
スタイルの共通部分をまとめて記述する
タグを入れ子にして同じクラス/ID名を使い分ける
見出しタグ(H1~H6)のスタイルを指定する
未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する
リンク文字のスタイルを指定する
タグのスタイルを指定する
外部からスタイルシートを読み込む
ページ内で一回だけスタイルを使用する
複数のタグで同一のスタイルを指定する
一時的にスタイルシートを利用
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス