解説

「画像を使わずボタンのようなリンクを作る (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> で指定していた時には出来なかった細かいスタイルも表現出来、また、全体にアンカーを張っているため、リンク文字以外でもカーソルに反応する所がミソです。