現在地: トップページ » Web制作お役立ち » html div要素とaリンクでボタンを作るテクニックを研究!

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

記事のまとめ

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


飛騨高山で畑を耕しながら、フリーランスのWebデザイナーとして活動しています。自然や文化に触れながら、人を癒し和ませるデザインを追求しています!文章作成、イラスト作成、写真撮影やパソコン作業全般が得意で大好きです。工業高校→工業大学で機械や電気の勉強をしていましたが、これからは自然の時代!と思い、自然の中で楽しく元気に暮らし続けることを目標に頑張っています。スピリチュアル大好き。最先端は苦手。時事問題も苦手。新聞は好きです。12年間乗ったクラウンからCAST SPORTへ乗り換え。Mac,iPad,GRATINA 4G(au/京セラ),NIKON COOLPIX P6000,D7200使い。ヘンプアクセサリー作りが趣味。

コメントを残す

メールアドレスが公開されることはありません。