html div要素とaリンクでボタンを作るテクニックを研究！

HTMLでリンクボタンを作るとき、div要素でボタンを作ってaタグでくくると楽にできるんですが、僕がレイアウトデザインに使用しているWordPressのプラグイン「ビジュアルコンポーザー」では、div要素をaタグでくくれません・・・。ということで、aタグでボタンを作るテクニックをご紹介します！
その方法は、テキストをaタグでくくり、クラスでボタンの形を作り、リンクの領域をボタンの範囲いっぱいに広げるという方法です。
a要素は、普通テキストの部分しかリンク領域にならないので、ボタンの領域はクリックしても反応しません。さて、どうやってリンク領域を広げるのでしょうか？

div要素とa要素でボタンを作る方法

次に、二つボタンを用意しました。上がリンク領域を広げていないボタン。下が広げたボタンです。
上のボタンは、テキストの上をマウスホバーしないとリンクしませんね。下のボタンはボタン全部がリンク領域に広がっているのがわかると思います。

リンク領域を広げたボタンのhtmlとスタイルを示します。
ポイントは、aタグのスタイル。
display: block;にすることで、左右100%にリンク領域が広がります。
paddingで上下の領域を調整して広げています。

htmlの書き方

<div class="button">
　　<a href="#" class="button-a">
　　　　ボタン
　　</a>
</div>

cssの書き方

/* ボタンのスタイル */
.button {
    width: 100%;
    height: 40px;
    border: 1px solid #b97ebb;
    border-radius: 5px;
    text-align: center;
}
/* マウスオーバー時のカラー */
.button:hover {
    background-color: #b97ebb;
}
/* リンク領域のスタイル */
.button-a {
    display: block;
    padding: 7px 0;
    text-align: center;
}
/* マウスホバー時のカラー*/
.button-a:hover {
    color: #fff;
}

記事のまとめ

いかがですか？簡単でしたね！
ボタンは、よく作ると思いますので、少しでも参考になれば幸いです！かっこいいボタンは、ホームページの格を上げてくれますよ！