(K)CSSでボタンを作成した時のロールオーバー時のpaddingの取り扱い方法的なこと

最近は、CSSでボタンを作成することがホントに多くなりました。画像時はbackgroundの一枚画像を差し替えたり、透明度（opacity）を変えてロールオーバーさせてますが、CSSのみで作ったボタンはbackgroundの色を変えるのが最も簡易的で一般的かと思います。その際、テキストとリンク領域の注意点を備忘録代わりにまとめておきます。

共通のHTMLとCSSを準備

まず、何も考えずにHTMLとCSSのみでボタンを作成してみます。
サンプルが複数あるので、見てくれの部分の共通のCSSのプロパティ値を設定します。

【HML】

     <p><a href="#">リンクテキスト</a></p>

【共通css】

p{
     width:150px;
     font-size: 14px;
     background: #f7313e; /* Old browsers */
     background: -moz-linear-gradient(top,  #f7313e 0%, #c1010e 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7313e), color-stop(100%,#c1010e)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top,  #f7313e 0%,#c1010e 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top,  #f7313e 0%,#c1010e 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top,  #f7313e 0%,#c1010e 100%); /* IE10+ */
     background: linear-gradient(to bottom,  #f7313e 0%,#c1010e 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7313e', endColorstr='#c1010e',GradientType=0 ); /* IE6-9 */
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
}

p a{
     text-decoration: none;
     color:#fff;
     display: block;
}

共通の横幅とフォントサイズに「width:150px」と「 font-size: 14px;」
うっすら、赤グラデーションとベンダープレフィックス
psddingをボックスサイズに反映させないためにbox-sizingを指定しています。（ベンダープレフィックス付き）

テキスト中心の角丸ボタンのロールオーバーさせる場合

css_rollover01 上記の共通プロパテイを元に角丸のボタンを作成します。

【HTML】

<p class="btn01"><a href="#">リンクテキスト</a></p>

【CSS】



p.btn01{
     padding:10px;
     text-align: center;
     border-radius: 30px;
}

p.btn01 a:hover{
     background: #ff9200;
}

paddingでテキストとbackgroundの間を空けて、テキストを中央にして、角丸に加工します（ベンダープレフィックスは省きます）

これでは、ボタンにカーソルを合わせると、テキストのみbackgroundの色が変わって、非常に残念な動きになります。ボタンの部分が全て色が変わるのが理想的です。

【修正方法】line-heightでボタンの高さを取得

paddingで高さ調整をしているため、このような動きになってしまうので、こういう場合は「line-height」を使います。

【CSS修正】

p.btn01_syusei{
     line-height: 45px;
     text-align: center;
     border-radius: 30px;
}
    
p.btn01_syusei a:hover{
     border-radius: 30px;
}

これで、ロールオーバー時に、ボタン全体の色が変わります。角丸は「a:hover」でも調整する必要があります。

DEMO

四角いボタンで左寄せテキストのボタンの場合

あまりにも、シンプルですか四角いボタンでテキストが左寄せの場合は、ボタンの左端にぴったりくっついたボタンはかっこ良くないですので、テキストとボタンの間にちょっと間隔を開けて上げる必要があります。

【HTML】

     <p class="btn02"><a href="#">リンクテキスト</a></p>

【CSS】

p.btn02{
     padding:10px 0 10px 5px;
}

これまた、paddingで間隔を開けて、ボタンっぽいデザインにしましたが、paddingの部分はロールオーバー時に背景色が変わらないので、残念な事になります。

【修正方法】インライン要素の＜span＞を挿入して調整する

【HTML】

     <p class="btn02_syusei"><a href="#"><span>リンクテキスト</span></a></p>

a要素の前にspanを挿入します。

p.btn02_syusei span{
     display: block;
     padding:10px 0 10px 5px;
}

spanに先ほど同じpaddingを設定します。
これで、ロールオーバー時に、ボタン全体の色が変わります。

DEMO

まとめ

CSS初心者の頃につまづいた所をちょうど、後輩に聞かれたので備忘録代わりに整理しました。
シンプルな事ですが、理解しておくのとしておかないのでは、効率がちがいます。シンプルなボタンでも、インライン要素や擬似要素など追加しておくと、ひと味ちがうデザインになります。スマホサイトが増えてロールオーバーはあまり見られなくなった今だからこそ、もう一度初心を振り返る意味でこんなのもいいかなと・・・今回は、以上ですm(_ _)m