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

CSSで作れる青系のおしゃれなボタンを4種類紹介します。
落ち着いたブルー、深みのあるネイビーブルー、爽やかなターコイズ、そして軽快なスカイブルーのバリエーションです。
すべてコピー＆ペーストで使えるCSSコードなので、すぐに試してデザインに取り入れられます。

落ち着いたブルー系
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: #1565c0; /* メインの青 */
  border: 1px solid #1565c0;
  color: #fff;
}
button:hover,
button:focus {
  background-color: #1e88e5; /* 少し明るい青 */
  border-color: #1e88e5;
  color: #fff;
}
button:active {
  background-color: #0d47a1; /* 濃い青 */
  border-color: #0d47a1;
  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: #1a237e; /* メインの深いネイビーブルー */
  border: 1px solid #1a237e;
  color: #fff;
}
button:hover,
button:focus {
  background-color: #283593; /* 少し明るいネイビーブルー */
  border-color: #283593;
  color: #fff;
}
button:active {
  background-color: #0d1656; /* さらに暗いネイビーブルー */
  border-color: #0d1656;
  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: #00838f; /* 青緑 */
  border: 1px solid #00838f;
  color: #fff;
}
button:hover,
button:focus {
  background-color: #00acc1; /* 明るめ青緑 */
  border-color: #00acc1;
  color: #fff;
}
button:active {
  background-color: #006064; /* 濃い青緑 */
  border-color: #006064;
  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: #bbdefb; /* 明るい青 */
  border: 1px solid #64b5f6;
  color: #0d47a1; /* 濃紺文字 */
}
button:hover,
button:focus {
  background-color: #90caf9; /* 少し濃い青 */
  border-color: #42a5f5;
  color: #0d47a1;
}
button:active {
  background-color: #64b5f6; /* 濃い青 */
  border-color: #1e88e5;
  color: #0d47a1;
}
button:disabled {
  opacity: 0.65;
  pointer-events: none;
}