aタグでボックス全体を囲いたい時
ボタンをcssで作成した際に、全体を囲いたい!!
そんな時に使えるcssを記載します。
cssを記載
下記のソースを追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style type="text/css"> .samplebox{ margin: 0px 0px 100px 0px; position: relative; } .samplebox p a{ display: block; width: 100%; height: 100%; padding: 20px; border-radius:10px; text-align: center; color: #fff; background-color: #f06d01; } .samplebox a:hover{ background-color: #ccc; color: #fff; } </style> |
HTMLを記載
下記のソースを追加してください。
|
1 2 3 |
<div class="samplebox"> <a href="#">ボタン</a> </div> |
サンプルを表示します。
上記のようにボタン全体をクリックすることが可能です。
