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

CSSで作るおしゃれな緑のボタンを、4つの配色パターンでご紹介します。
落ち着いたグリーン系、柔らかいパステル系、高級感のあるエメラルド系、明るく元気なライムグリーン系です。

今回のボタン用CSSコードはChatGPTに生成してもらいました。
「どんな色が合うかわからない…」という方も、AIを使えば簡単に配色のアイデアを試せます。

落ち着いたグリーン系
1. コード
2. 落ち着いたグリーン系の使いどころ
柔らかいパステル系
1. コード
2. 柔らかいパステル系の使いどころ
高級感のあるエメラルド系
1. コード
2. 高級感のあるエメラルド系の使いどころ
明るく元気なライムグリーン系
1. コード
2. 明るく元気なライムグリーン系の使いどころ
CSSで作るおしゃれなボタンシリーズ

落ち着いたグリーン系

コード

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