CSSでボタンの高さはどうやって指定する?height・line-height・paddingなど

更新日:2018年7月1日

CSS3では、border-radiusで角丸が指定できたり、box-shadowやグラデーションなどの装飾用プロパティ・関数が充実しているため、CSSだけでボタンを設置するというのは当たり前になってきました(昔は画像で作ってましたよね…!)。今回はボタンをつくるときの、高さの指定方法をいくつか紹介したいと思います。

paddingで指定する

フォントの大きさやテキストの長さに合わせて可変するボタンが作れます。ただしボタンのサイズにばらつきが起きるのがNGの場合は使いづらいかも。

CSS

.hoge{
 padding:10px;
 display:inline-block;
 background:#9b4dca;
 color:#fff;
 border-radius:5px;
 text-decoration:none;
 line-height:1;
}

実際の見た目

サンプルのボタン

heightとline-heightで指定する

heightとline-heightを同じ値で指定することで、テキストを高さ中央に指定することができます。また、サンプルではwidthを指定し、text-alignをcenterにしています。高さ・横幅を完全に固定したい場合にオススメ。

.hoge{
 width:150px;
 height:30px;
 line-height:30px;
 text-align:center;
 display:inline-block;
 background:#9b4dca;
 color:#fff;
 border-radius:5px;
 text-decoration:none;
}

実際の見た目

サンプルのボタン

display:inline-flexでテキストを縦横中央に

あんまり使わない思うんですが、a要素の中にspan要素を置いて、display:inline-flexを使って縦横中央にテキストを持ってくるという方法です。ボタンのデザインの都合上ありえそう。

<a href="#" class="wrapper"><span class="text">サンプルのボタン</span></a>
.wrapper{
 display:inline-flex;
 justify-content:center;
 align-items:center;
 width:150px;
 height:30px;
 background:#9b4dca;
 color:#fff;
 border-radius:5px;
 text-decoration:none;
}
.text{
 color:#fff;
}

サンプルのボタン

まとめ paddingが楽かも…

ボタンは文言の長さやフォントのサイズに合わせて可変させなきゃいけないことが多いので、paddingで指定するのが一番ラクかも?デザイン自体も可変すること前提で作るのが良いのではないかと思います。ただどうしても画面のレイアウトの都合で、固定サイズにしなければいけないこともあるので、そのときはheight・line-height指定がいいんじゃないかと思います。

@yoshikikoji 書き手:小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter: @yoshikikoji

この記事が気に入ったらいいね・フォローお願いします!

『Webデザイン』の記事