ボタンはどのようなWebサイトでも必ず存在するパーツですね。
ボタンを作るのは簡単ですが、デザイン通りに、そしてどのような時でもレイアウトが崩れないボタンを作るにはどうするか？
そんなボタンの長さ・高さの指定についてどうするのが結局いいのかを３つのパターンで考えてみました。
ボタンの作成パターン
まず、作成するのは↓の一般的な普通のボタン
普通過ぎて、こんなボタンをデザインしたら没になりそうですが....
長さは300px、高さを50px、フォントを16pxにしています。
ボタンをpx固定で指定する場合
まずは、普通に
width:300px 、height:50px もしくは、line-height: 50px; で指定するパターン
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
【メリット】
・直接ピクセルで指定するのでデザイン通りに作成しやすい。
・作成の時間が短縮できる。
【デメリット】
・幅・高さ固定なので、文字数が増えた際に表示が崩れる。
ボタンですよ！ボタンですよ！ボタンですよ！ボタンですよ！ボタンですよ！ボタンですよ！・文字数で長さが違うボタンなどがあった場合に、対応が面倒（モディファイア等）
【どんな時に使用するか？】
私はあまりピクセル指定でボタンを作成することはありませんが、Web制作会社の制作実績などを見ると、結構px指定で作成などしてるみたいですね。
ボタンの長さがデザイン通して、ほとんど同じ場合や、ボタン中のテキストに改行されるほど長いテキストが入らないと決まっているときはピクセルで作成してもよいと思います。
ボタンをmin-width かmin-hegiht で指定するパターン
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
【メリット】
・ボタン中のテキストが長くなっても、幅・高さが伸びるので表示が崩れない。
・デザインどうりに作成できる。
【デメリット】
・min-widthを指定している場合、画面幅が狭い場合などに画面外にはみ出る場合がある。
【どんな時に使用するか？】
どちらか・もしくは両方をmin- で指定するパターン。
ボタン中の文字が長い場合も長さが自動可変されるのではみ出ることがないです。
テキストが長いものが入るかもしれないときなどに良いと思います。
ただ、普通にwidthで指定する場合は、max-width:100% を指定すれば画面や親要素からはみ出ることがありませんが、min-widthで指定している場合は、max-width:100%を指定しても画面からはみ出ますので、そこに注意が必要です。
ボタンをpaddingで高さ、幅を指定する
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
【メリット】
・こちらもボタン中のテキストが長くなっても、幅・高さが伸びるので表示が崩れない。
・幅を指定していないので、親要素や画面が狭まったときもはみ出さない。
・テキストのセンタリングが簡単。
【デメリット】
・数ピクセルデザインと差異がでることが多い。
【どんな時に使用するか？】
個人的にこのパターンを使用する場合が、多いです。
高さと幅を指定していないので、親要素よりはみ出すこともなく、文字数が増えた場合も可変するので、便利です。
また、幅をwidthで固定して、高さのみpaddingで指定したりなど組み合わせて作成しても良いと思います。
ただ、どうしても数ピクセルデザインと高さが異なったりするので、チェックが厳しい人だった場合など、突っ込みが入るかもしれません。
まとめ
以上ボタンの幅・高さについて考えるでした。
どれも一長一短ではあるんですが、ボタンのデザインや、ボタンのパターンが複数あるなど、その時によって最適な作り方は変わると思います。
個人的なベストは、 padding で作成が良いという結果になりました。