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;
}- 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;
}深紅＋ゴールド系の使いどころ
- 高級感や重厚感を出したいとき
例：高級ブランドのサイト、プレミアムサービスの購入ボタン、特別なキャンペーンの申し込みボタン - 重要性や価値を強調したいとき
例：特別な操作ボタン、注意喚起の操作、限定イベントへの参加ボタン
💡 ポイント
深紅＋ゴールドは落ち着いた赤に華やかなアクセントを加え、高級感や重厚感を演出できます。重要度の高い操作や特別な場面で目立たせたいときに向いています。
影（シャドウ）の追加
落ち着いた赤系のボタンに影をつけて立体感を出しています。
コード
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）で奥行きと操作の瞬間を演出
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を使うと、赤色に力強い濃淡と深みが生まれます。
鮮やかな#e53935（明るい赤）から、わずかに濃い#c62828（引き締まった赤）へと変化させることで、単色では出せない立体的で視線を引く質感が生まれます。
このわずかな色の変化が、ボタンにエネルギーと注目度を与え、押したときの確かな手応えを際立たせます。
CSSで作るおしゃれなボタンシリーズ
他の色のおしゃれなボタンもチェックしましょう。
