ボタンサンプル

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; を設定してみました。

でもこの場合、ボタン内に収まらないテキストは見えなくなっちゃうんですよねー、、

様々な環境から閲覧することを考えると、ボタンのテキストは短めがいいんじゃねえかなーとか思う今日この頃です。