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

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

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

落ち着いたグリーン系
1. コード
2. 落ち着いたグリーン系の使いどころ
柔らかいパステル系
1. コード
2. 柔らかいパステル系の使いどころ
高級感のあるエメラルド系
1. コード
2. 高級感のあるエメラルド系の使いどころ
Web制作を学ぶならUdemy

落ち着いたグリーン系

コード

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;
  outline: none;
}
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; /* 文字は同じ濃いグレー */
  outline: none;
}
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;
  outline: none;
}
button:active {
  background-color: #00695c; /* 深いエメラルドで高級感 */
  border-color: #00695c;
  color: #fff;
}
button:disabled {
  opacity: 0.65;
  pointer-events: none;
}