【コピペOK】CSSで作るおしゃれな赤のボタン6パターン

CSSで作るおしゃれな赤系ボタンを6種類ご紹介します。
落ち着いた赤系、柔らかいパステル系、オレンジ寄りのコーラルレッド系、深紅＋ゴールドの組み合わせ。
そして、おしゃれ度アップの、影付き・グラデーションのボタンもあります。
どれもコピペで使えるコードになっているので、気軽に試すことができます。

落ち着いた赤系

• 信頼感や落ち着きを出す
• 金融系サイト、医療・健康系サイト向け
• 購入確認画面の「同意する」ボタン、キャンセルボタン、削除ボタン

コード

button {
  display: block;
  width: 80%;
  margin: 30px auto;
  padding: 12px 24px;
  font-size: 20px;
  border-radius: 5px;
  transition: all 0.2s;

  background-color: #c62828; /* メインの赤 */
  border: 1px solid #c62828;
  color: #fff;
}
button:hover,
button:focus {
  background-color: #e53935; /* 少し明るい赤 */
  border-color: #e53935;
  color: #fff;
}
button:active {
  background-color: #8e0000; /* 濃い赤 */
  border-color: #8e0000;
  color: #fff;
}
button:disabled {
  opacity: 0.65;
  pointer-events: none;
}

柔らかいパステル系

• 親しみやすさ・やさしさを出す
• 主張を抑えて軽やかに見せる
• 子ども向けサイト、生活・趣味系サイト向け

コード

button {
  display: block;
  width: 80%;
  margin: 30px auto;
  padding: 12px 24px;
  font-size: 20px;
  border-radius: 5px;
  transition: all 0.2s;

  background-color: #ff8a80; /* メインのパステル赤 */
  border: 1px solid #ff8a80;
  color: #333; /* 黒系の文字色で視認性アップ */
}
button:hover,
button:focus {
  background-color: #ff5252; /* 濃い赤 */
  border-color: #ff5252;
  color: #fff; /* 背景が濃くなったら白文字に切り替え */
}
button:active {
  background-color: #ff1744;
  border-color: #ff1744;
  color: #fff;
}
button:disabled {
  opacity: 0.65;
  pointer-events: none;
}

【広告】

オレンジ寄りのコーラルレッド系

• 明るく元気な印象をだす
• 強すぎず明るく華やかな印象を出せる
• イベントやキャンペーンサイトのボタン、買い物カートの追加ボタン

コード

button {
  display: block;
  width: 80%;
  margin: 30px auto;
  padding: 12px 24px;
  font-size: 20px;
  border-radius: 5px;
  transition: all 0.2s;

  background-color: #ff4d4d; /* メインのコーラルレッド */
  border: 1px solid #ff4d4d;;
  color: #fff;
}
button:hover,
button:focus {
  background-color: #ff3333; /* 濃い赤 */
  border-color: #ff3333;
  color: #fff;
}
button:active {
  background-color: #cc0000;
  border-color: #cc0000;
  color: #fff;
}
button:disabled {
  opacity: 0.65;
  pointer-events: none;
}

深紅＋ゴールド組み合わせ

• 高級感や重厚感を出す
• 重要性や価値を強調したいとき向け
• 高級ブランドのサイト、プレミアムサービスの購入ボタン、特別なキャンペーンの申し込みボタン

コード

button {
  display: block;
  width: 80%;
  margin: 30px auto;
  padding: 12px 24px;
  font-size: 20px;
  border-radius: 5px;
  transition: all 0.2s;

  background-color: #8b0000; /* メインの深紅 */
  border: 1px solid #8b0000;
  color: #ffd700; /* ゴールド文字 */
}
button:hover,
button:focus {
  background-color: #a40000; /* 少し明るい深紅 */
  border-color: #a40000;
  color: #ffd700; /* ゴールド文字 */
}
button:active {
  background-color: #5a0000; /* 濃い深紅 */
  border-color: #5a0000;
  color: #ffd700; /* ゴールド文字 */
}
button:disabled {
  opacity: 0.65;
  pointer-events: none;
}

影（シャドウ）の追加

落ち着いた赤系のボタンに影をつけて立体感を出しています。

コード

button {
  display: block;
  width: 80%;
  margin: 30px auto;
  padding: 12px 24px;
  font-size: 20px;
  border-radius: 5px;
  transition: all 0.2s;

  background-color: #c62828; /* メインの赤 */
  border: 1px solid #c62828;
  color: #fff;

  /* 薄い影 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button:hover,
button:focus {
  background-color: #e53935; /* 少し明るい赤 */
  border-color: #e53935;
  color: #fff;

  /* 濃い影 */
  box-shadow: 0 8px 20px rgba(229, 57, 53, 0.6);
}
button:active {
  background-color: #8e0000; /* 濃い赤 */
  border-color: #8e0000;
  color: #fff;

  box-shadow: none; /* 押した時は影を消す */
}
button:disabled {
  opacity: 0.65;
  pointer-events: none;
}

box-shadowという設定を書き加えるだけで、ボタンに立体的な空間を表現できます。

通常時は、ボタンが画面から少しだけ浮いているように見せます。
マウスポインタを乗せた時は、ボタンが一段と手前に引き寄せられるように見せます。
クリックした瞬間は、ボタンが画面の中に吸い込まれたように表現します。

グラデーションの追加

グラデーションを使ったおしゃれな赤のボタンを作ります。

コード

button {
  display: block;
  width: 80%;
  margin: 30px auto;
  padding: 12px 24px;
  font-size: 20px;
  border-radius: 5px;
  transition: all 0.2s;

  /* 背景色をグラデーションの赤に替える */
  background-image: linear-gradient(to bottom, #e53935 0%, #c62828 100%);
  border: none; /* 枠線は消す */
  color: #fff;
}

button:hover,
button:focus {
  /* ホバー時はグラデーションの濃さを逆転させる */
  background-image: linear-gradient(to top, #e53935 0%, #c62828 100%);
  color: #fff;
}

button:active {
  /* クリック時は最も濃いグラデーションにする */
  background-image: linear-gradient(to top, #c62828 0%, #b71c1c 100%);
  color: #fff;
}

button:disabled {
  opacity: 0.65;
  pointer-events: none;
}

linear-gradientを使うと、赤色に力強い濃淡と深みが生まれます。

明るい赤からわずかに濃い赤へと変化させることで、単色では出せない立体的で視線を引く質感が生まれます。

CSSで作るおしゃれなボタンシリーズ

他の色のおしゃれなボタンもチェックしましょう。