Webサイトのボタンを少し目立たせたいときに便利なのが、CSSのグラデーションです。今回は、サイトで使えるボタンのグラデーション設定方法を、シンプルなコード例と一緒に紹介します。

CSSグラデーションとは？

CSSグラデーションとは、
1つの色から別の色へなめらかに変化させる表現のことです。
画像を使わずにCSSだけで表現できるため、

• 表示が軽い
• デザイン調整が簡単
• 色の変更がすぐできる

といったメリットがあります。

グラデーションボタンの基本設定

まずは、基本となるCSSの書き方です。

.btn-orange {
background: linear-gradient(135deg, #ffb347, #ff8c00);
}

linear-gradient() の中で、グラデーションの向きと色を指定します。

• 135deg：グラデーションの向き
• #ffb347 → #ff8c00：開始色と終了色

ボタンとして使う場合のCSS例

左は青、右はオレンジのボタンを作成しました。「CSS」タブを押して、background の設定を確認してみてください。

青のボタンは 2色のグラデーション、オレンジのボタンは 3色のグラデーションを使用しています。
オレンジ側では、0%・50%・100% のように色の位置（％）を指定することで、グラデーションの変化をよりはっきりさせています。
このように、background にグラデーションを設定するだけで、簡単にボタンを作成することができます。ぜひ試してみてください！