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

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

落ち着いたブルー系

コード

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

落ち着いたブルー系の使いどころ

• 信頼感や落ち着きを出したいとき
  例：金融系サイト、医療・健康系サイト、ログインや送信ボタン
• 落ち着いた印象で強すぎない存在感を出したいとき
  例：キャンセルボタン、サブナビゲーション、補助的な操作ボタン

💡 ポイント

落ち着いたブルーは信頼感や落ち着きを演出しつつ、主張しすぎず自然に重要性や補助的役割を伝えたいときに向いています。

深みのあるネイビーブルー系

コード

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

軽快なスカイブルー系の使いどころ

• 明るく親しみやすい印象を出したいとき
  例：旅行・アウトドア系サイト、教育・学習系サイト、お知らせボタン
• 軽やかで目立ちすぎないアクセントを加えたいとき
  例：確認ボタン、サブナビゲーション、情報更新ボタン

💡 ポイント

軽快なスカイブルーは、明るく爽やかで軽やかな印象を与えつつ、補助的な操作や目立たせたい情報にアクセントを加えたいときに向いています。

【広告】

影（シャドウ）の追加

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

コード

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;

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

  /* 濃い影 */
  box-shadow: 0 8px 20px rgba(21, 101, 192, 0.6);
}
button:active {
  background-color: #0d47a1; /* 濃い青 */
  border-color: #0d47a1;
  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, #1e88e5 0%, #1565c0 100%);
  border: none; /* 枠線は消す */
  color: #fff;
}
button:hover,
button:focus {
  /* ホバー時はグラデーションの濃さを逆転させる */
  background-image: linear-gradient(to top, #1e88e5 0%, #1565c0 100%);
  color: #fff;
}
button:active {
  /* クリック時は最も濃いグラデーションにする */
  background-image: linear-gradient(to top, #1565c0 0%, #0d47a1 100%);
  color: #fff;
}
button:disabled {
  opacity: 0.65;
  pointer-events: none;
}

グラデーションで色に深みを出す

linear-gradientを使うと、同じ青でも上から下へ色が変化する深みのあるデザインになります。わずかな変化が、ボタンに高級感を与えます。

配色に迷ったらチェックしたいページ

おしゃれな緑のボタンをコピペで使おう

赤系のボタンを作りたいならこちらをチェック

おしゃれな背景グラデーションの作り方