cssは以下のようになっております。
.btn { display: block; height: 44px; border-radius: 12px; box-sizing: border-box; box-shadow: 0px 3px 9px #999; color: #fff; font-weight: bold; text-decoration: none; line-height: 44px; text-align: center; overflow: hidden; } .btn:active { box-shadow: none; }
今回クリック領域を設定する際に padding
を使用しておりません。
padding
でクリック領域を設定するメリットは以下です。
————————-
○ リンクテキストが全てボタン内に表示される
○ 上下に同じだけの値を取ることで上下揃えもお手軽
————————-
ただし以下がデメリットだと思ってます。
————————-
✕ ボックスサイズが可変なので font-size
や文字数によってはボタンの大きさが変わる
————————-
僕はボタンの高さをまず固定させたい派なので height
を使います。(今回は高さは44pxで固定です。)
次に height
と同じだけの line-height
を設定します。そうすることでテキストの上下揃えが行えます。
また、はみ出したテキストがクリック可能になるとユーザビリティが低下すると思ったので ovrflow: hidden;
を設定してみました。
でもこの場合、ボタン内に収まらないテキストは見えなくなっちゃうんですよねー、、
様々な環境から閲覧することを考えると、ボタンのテキストは短めがいいんじゃねえかなーとか思う今日この頃です。