CSSで作るおしゃれな赤のボタン4パターン

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

落ち着いた赤系
1. コード
2. 落ち着いた赤系の使いどころ
柔らかいパステル系
1. コード
2. 柔らかいパステル系の使いどころ
オレンジ寄りのコーラルレッド系
1. コード
2. コーラルレッド系の使いどころ
深紅＋ゴールド組み合わせ
1. コード
2. 深紅＋ゴールド系の使いどころ
CSSで作るおしゃれなボタンシリーズ
Web制作を学ぶならUdemy

落ち着いた赤系

コード

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;
}

hover/ focus：マウスオーバー時の色
active：押している時の色
disabled：無効時の見た目

落ち着いた赤系の使いどころ

信頼感や落ち着きを出したいとき
例：金融系サイト、医療・健康系サイト、購入確認画面の「同意する」ボタン
主張しすぎず注意や重要性を伝えたいとき
例：キャンセルボタン、削除ボタン、サブナビゲーション

💡 ポイント

落ち着いた赤は派手さより穏やかさを重視しつつ、注意や重要性をさりげなく伝えたいときに向いています。

柔らかいパステル系

コード

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;
}