※このページで解説に使っているカプセル薬型ボタンにはリンクなどは特にありません
目次
シンプルな基本形
<a href="リンク先のURL" class="btn">ボタン</a>.btn {
display: block;
text-decoration: none;
cursor: pointer;
border-radius: 9999px;
color: #fff;
background: #3d79d5;
text-align: center;
font-size: 24px;
line-height: 1;
padding: 16px 32px;
}CSSコード解説
- <a>タグはデフォルトではインライン要素（display: inline;）ので、ボタンとして扱うために display: block; または display: inline-block; でブロック要素 または インラインブロック要素にします
- <a>タグには文字の下にリンクを表す下線がついている場合があり、ボタンには不要ので text-decoration: none; でなくします
- マウスカーソルを乗せた際に、ボタンだとわかりやすくするために cursor: pointer; で適切なカーソルに変化するように指定します
.btn {
display: block;
text-decoration: none;
cursor: pointer;
}- border-radius にpxで非常に大きな値を指定すると、ボタンの左右の端を半円形にしてカプセル薬型になります
- border-radius の値はボタンの高さの半分以上のpxで指定するとカプセル薬型になりますが、
思わむ改行などでボタンの高さが変動してもカプセル薬型を維持できるように border-radius: 9999px; などの非常に大きな値にします
- border-radius の値はボタンの高さの半分以上のpxで指定するとカプセル薬型になりますが、
.btn {
display: block;
text-decoration: none;
cursor: pointer;
border-radius: 9999px; //ボタンの形をカプセル薬型に
}- border-radius を % で指定すると、カプセル薬型になりません
楕円形になります
.btn {
display: block;
text-decoration: none;
cursor: pointer;
border-radius: 100%; //%で指定
}- color: に文字の色;を指定します
- background: にボタン自体の色;を指定します
- 文字を左右中央寄せにするために text-align: center; を指定します
.btn {
display: block;
text-decoration: none;
cursor: pointer;
border-radius: 9999px;
color: #fff //文字を白に
background: #3D79d5; //ボタンの色を水色に
text-align: center; //文字を左右中央寄せに
}- font-size: は文字の大きさを指定します
- line-height: 1; にするとpaddingの上下（縦）の大きさを調整しやすくなります
- padding: 上下の値左右の値; でボタンの縦・横の大きさを調整します
- paddingの上下の値が同じになる指定の仕方をすることで縦方向の中央寄せになります
.btn {
display: block;
text-decoration: none;
cursor: pointer;
border-radius: 9999px;
color: #fff;
background: #3d79d5;
text-align: center;
font-size: 24px; //文字の大きさ
line-height: 1; //上下の大きさを調整しやすく
padding: 16px 32px; //文字からボタンの外側まで空間の大きさ
}リアクションをつける応用
マウスカーソルを乗せた時（hover）色を変える
- 疑似要素を用いて、.クラス名:hover { }の中にマウスカーソルを乗せた時の変化を指定します
- color: に文字の色; background: にボタン自体の色;を指定します
- transition: で滑らかに変化完了までの時間を秒数（s）で指定します
（瞬時に変化させる場合は transition: は不要です）
.btn {
display: block;
text-decoration: none;
cursor: pointer;
border-radius: 9999px;
color: #fff;
background: #3d79d5;
text-align: center;
font-size: 24px;
line-height: 1;
padding: 16px 32px;
}
// マウスカーソルをhoverさせた時の変化を下記に指定
.btn:hover {
color: #000; //変化後の文字の色
background: #20c997; //変化後のボタンの色
transition: 0.8s; //変化にかける時間(秒)
}タップ・クリックした際に押し込む
立体感をつける
- ボタン自体の色より濃い色の影をボタンの下につけることで立体感をつけます
.btn {
display: block;
text-decoration: none;
cursor: pointer;
border-radius: 9999px;
color: #fff;
background: #3d79d5;
text-align: center;
font-size: 24px;
line-height: 1;
padding: 16px 32px;
box-shadow: 0 8px #000080; //ボタンの下に影をつけて立体感を出す
}タップ・クリックに反応させる
- 疑似要素を用いて、.クラス名:active { }の中にタップ・クリックした時の変化を指定します
- box-shadow: none; 立体感を出すための影を消します
- transform: translateY(縦方向の移動距離); でボタンの位置を移動させます
（縦方向の移動距離は推す前の box-shadow の縦軸の影幅と同じ値を指定します）
.btn {
display: block;
text-decoration: none;
cursor: pointer;
border-radius: 9999px;
color: #fff;
background: #3d79d5;
text-align: center;
font-size: 24px;
line-height: 1;
padding: 16px 32px;
box-shadow: 0 8px #000080;
}
// タップ・クリックした時の変化を下記に指定
.btn:active {
box-shadow: none; //立体感を出すための影を消す
transform: translateY(8px); //ボタンの位置を縦方向に移動
}
コメント