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

「緑のボタン」のデザイン集です。

落ち着いたグリーン、柔らかなパステル、高級感のあるエメラルド、明るいライムグリーンの4色に加え、影付きとグラデーションの計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;
}

柔らかいパステル系

• 優しい印象や親しみやすさを出したいとき
• 目立たせつつも強すぎない色にしたいとき
• 子ども向けサイト、カフェや雑貨のEC向け

コード

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

【広告】

高級感のあるエメラルド系

• 高級感や上品さを演出したいとき
• 目立たせつつ落ち着いた印象にしたいとき
• ジュエリー・ファッション・ラグジュアリー系サイト向け

コード

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

明るく元気なライムグリーン系

• 活発さやフレッシュさを出したいとき
• 目を引きやすく楽しい雰囲気を出したいとき
• キャンペーンサイト、若者向けサービス、ゲームやイベント系サイト向け

コード

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という設定を追記するだけで、ボタンに立体的な奥行きを持たせることができます。

通常時は、ボタンが背景からわずかに浮き上がって見えるような印象を与えます。
ホバー時（上に触れた時）は、ボタンがさらに力強くせり上がったように見せます。
押したときは、ボタンが奥へ沈み込んだように表現します。

グラデーションの追加

グラデーションを使ったおしゃれな緑のボタンを作ります。

コード

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を使うと、緑色に自然な濃淡と奥行きが生まれます。

明るい葉っぱのような緑から、わずかに濃い森のような緑へと変化させることで、単色では出せない立体的でリッチな質感が生まれます。

CSSで作るおしゃれなボタンシリーズ

他の色のおしゃれなボタンもチェックしましょう。