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;
}
- 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;
}
【広告】
影（シャドウ）の追加
落ち着いたブルー系のボタンに影をつけて立体感を出しています。
コード
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プロパティを追記するだけで、ボタンに立体感を持たせることができます。
通常時は、薄い影でボタンが少しだけ浮いているように見せます。
hover時は影を強くして、少し浮き上がる感じにしています。
押したときは影を消します。
グラデーションの追加
落ち着いたブルー系のボタンをベースにグラデーションを追加します。
コード
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を使うと、同じ青でも上から下へ色が変化する深みのあるデザインになります。わずかな変化が、ボタンに高級感を与えます。
配色に迷ったらチェックしたいページ
おしゃれな緑のボタンをコピペで使おう
赤系のボタンを作りたいならこちらをチェック
おしゃれな背景グラデーションの作り方
