Webサイトのデザインを格上げする「緑のボタン」のデザイン集です。
今回は、落ち着いたグリーン系、柔らかいパステル系、高級感のあるエメラルド系、明るく元気なライムグリーン系のシンプルな4種のカラーバリエーションと、影付き、グラデーションといったおしゃれ度アップの2つのテクニックを使った、合計6パターンをご紹介します。
あなたのサイトにぴったりの、理想的なグリーンボタンのデザインを見つけてみましょう！
落ち着いたグリーン系
コード
button {
display: block;
width: 80%;
background-color: #2e7d32; /* メインの緑 */
border: 1px solid #2e7d32;
color: #fff;
margin: 30px auto;
padding: 12px 24px;
font-size: 20px;
border-radius: 5px;
transition: all 0.2s;
}
button:hover,
button:focus {
background-color: #388e3c; /* 少し明るい緑 */
border-color: #388e3c;
color: #fff;
}
button:active {
background-color: #1b5e20; /* 濃い緑 */
border-color: #1b5e20;
color: #fff;
}
button:disabled {
opacity: 0.65;
pointer-events: none;
}- hover/ focus：マウスオーバー時の色
- active：押している時の色
- disabled：無効時の見た目
落ち着いたグリーン系の使いどころ
- 信頼感や安心感を出したいとき
例：企業サイト、健康・環境系サイト、フォームの送信ボタン - 主張しすぎず自然に見せたいとき
例：ナビゲーション、サブボタン、補助的な操作
💡 ポイント
- 落ち着いた緑は派手さより安定感を重視するときに向いています。
【広告】
柔らかいパステル系
コード
button {
display: block;
width: 80%;
background-color: #81c784; /* メインのパステルグリーン */
border: 1px solid #81c784;
color: #2e2e2e; /* 濃いグレーで見やすく */
margin: 30px auto;
padding: 12px 24px;
font-size: 20px;
border-radius: 5px;
transition: all 0.2s;
}
button:hover,
button:focus {
background-color: #a5d6a7; /* さらに明るいグリーン */
border-color: #a5d6a7;
color: #2e2e2e; /* 文字は同じ濃いグレー */
}
button:active {
background-color: #66bb6a; /* 少し濃いグリーン */
border-color: #66bb6a;
color: #fff; /* 濃い緑なので白文字に切り替え */
}
button:disabled {
opacity: 0.65;
pointer-events: none;
}柔らかいパステル系の使いどころ
- 優しい印象や親しみやすさを出したいとき
例：子ども向けサイト、カフェや雑貨のEC、ブログのCTAボタン - 目立たせつつも強すぎない色にしたいとき
例：サブボタン、通知・確認用のボタン
💡 ポイント
- パステル系は柔らかく軽やかな印象を与え、心理的に抵抗なくクリックされやすいです。
【広告】
高級感のあるエメラルド系
コード
button {
display: block;
width: 80%;
background-color: #009688; /* メインのエメラルドグリーン */
border: 1px solid #009688;
color: #fff;
margin: 30px auto;
padding: 12px 24px;
font-size: 20px;
border-radius: 5px;
transition: all 0.2s;
}
button:hover,
button:focus {
background-color: #26a69a; /* 明るめのエメラルド */
border-color: #26a69a;
color: #fff;
}
button:active {
background-color: #00695c; /* 深いエメラルドで高級感 */
border-color: #00695c;
color: #fff;
}
button:disabled {
opacity: 0.65;
pointer-events: none;
}高級感のあるエメラルド系の使いどころ
- 高級感や上品さを演出したいとき
例：ジュエリー・ファッション・ラグジュアリー系サイトのCTAボタン - 目立たせつつ落ち着いた印象にしたいとき
例：購入ボタン、重要な操作ボタン
💡 ポイント
- エメラルド系は鮮やかさと落ち着きのバランスが良く、信頼感と高級感を同時に出せます。
明るく元気なライムグリーン系
コード
button {
display: block;
width: 80%;
background-color: #cddc39; /* メインのライムグリーン */
border: 1px solid #cddc39;
color: #333; /* 明るい背景なので濃い文字色 */
margin: 30px auto;
padding: 12px 24px;
font-size: 20px;
border-radius: 5px;
transition: all 0.2s;
}
button:hover,
button:focus {
background-color: #d4e157; /* 少し濃いライムグリーン */
border-color: #d4e157;
color: #333;
}
button:active {
background-color: #afb42b; /* 深めのライムグリーン */
border-color: #afb42b;
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: #2e7d32; /* メインの緑 */
border: 1px solid #2e7d32;
color: #fff;
/* 薄い影 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button:hover,
button:focus {
background-color: #388e3c; /* 少し明るい緑 */
border-color: #388e3c;
color: #fff;
/* 濃い影 */
box-shadow: 0 8px 20px rgba(56, 142, 60, 0.6);
}
button:active {
background-color: #1b5e20; /* 濃い緑 */
border-color: #1b5e20;
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, #4caf50 0%, #388e3c 100%);
border: none; /* 枠線は消す */
color: #fff;
}
button:hover,
button:focus {
/* ホバー時はグラデーションの濃さを逆転させる */
background-image: linear-gradient(to top, #4caf50 0%, #388e3c 100%);
color: #fff;
}
button:active {
/* クリック時は最も濃いグラデーションにする */
background-image: linear-gradient(to top, #388e3c 0%, #2e7d32 100%);
color: #fff;
}
button:disabled {
opacity: 0.65;
pointer-events: none;
}
緑色のグラデーションで「自然な質感」と「高級感」を演出
linear-gradientを使うと、緑色に自然な濃淡と奥行きが生まれます。
明るい#4caf50（葉っぱのような緑）から、わずかに濃い#388e3c（森のような緑）へと変化させることで、単色では出せない立体的でリッチな質感が生まれます。
このわずかな色の変化が、ボタンに落ち着きと高級感を与え、押したときの反応の良さを際立たせます。
CSSで作るおしゃれなボタンシリーズ
他の色のおしゃれなボタンもチェックしましょう。
