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指定がいいんじゃないかと思います。