LESSON 04

CSSでボタンのデザインを変更する

ボタンは「詳しく見る」「お問い合わせ」など次の行動へ進んでもらう重要なパーツです。色・角丸・高さ・枠線を変えて雰囲気を調整します。

1. Template 001のボタン設定

共通ボタンstyle.css

.button {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
}

.button はすべてのボタンに共通する基本形です。色だけは .button-primary など別クラスで指定しています。

四角め標準丸い

角丸の変更例style.css

.button {
  border-radius: 999px;
}

999px にすると、左右が丸い「ピル型」のボタンになります。0pxなら四角です。

少し大きなボタンstyle.css

.button {
  min-height: 56px;
  padding: 0 28px;
}

スマートフォンで押しやすくしたい場合にも、ボタンの高さは重要です。

現在の指定style.css

.button-primary {
  color: #fff;
  background: var(--main-color);
}

Template 001では var(--main-color) を使っているので、初心者編集エリアのメインカラーを変えるだけでもボタン色が連動します。

ボタンだけ別色にする例style.css

.button-primary {
  background: #d26435;
}

アウトラインボタンstyle.css

.button-outline {
  color: var(--main-color);
  border-color: var(--main-color);
  background: transparent;
}

重要度が最も高いボタンは塗りつぶし、補助的なボタンは枠線にすると、クリックしてほしい優先順位が伝わりやすくなります。

hoverの例style.css

.button:hover {
  transform: translateY(-2px);
}

.button-primary:hover {
  background: #284f79;
}

:hover はPCでマウスを重ねたときの状態です。動きを大きくしすぎず、少し変化させる程度が使いやすいです。

NEXT LESSON

見出しのルールを揃えると、ページ全体の完成度が上がります。