CSS スタイルシート雑技 No. 10
画像を使わずボタンのようなリンクを作る (2)
ブロック要素全体にアンカーを適用すると、パネル全体が変化する形のものに。
解説
「画像を使わずボタンのようなリンクを作る (1)」で紹介したものを応用して、より柔軟なボタンを作りましょう。
前回のものでは、アンカーとなる <a> に、直接ボタンとしての見栄えを記述しました。そのため、リンクの単語(文)中で改行がはいってしまうとボタンらしく見えなくなってしまう、というデメリットがありました。
今回はアンカーとなる <a> を、<div> 全体に適用させる事で、より一層ボタンらしくみせています。
<style type="text/css">
div{
background-color: #aaaaaa;
border-style: outset;
border-width: 2px;
border-color: #aaaaaa;
width: 50%;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
padding: 10%;
text-decoration: none;
}
a:hover div{
background-color: #cccccc;
}
a:active div{
background-color: #cccccc;
border-style: inset;
}
</style>
<a href="url">
<div>
リンクさせたい文字等をここに
</div>
</a>
如何でしょうか。レイアウトには比較的柔軟な <div> 要素にスタイルを適用する事で、<a> で指定していた時には出来なかった細かいスタイルも表現出来、また、全体にアンカーを張っているため、リンク文字以外でもカーソルに反応する所がミソです。