CSSでグラデーション有りの立体的なボタンを作る方法

あるリンクを強調させたい場合などはただリンクを張るだけでなく、立体的なボタンにするなどちょっとした工夫をすればクリック率が上がることがあります。

またフォーム内などでもただ無機質なボタンを設置するのではなくほんの少しだけボタンをグラデーションさせたりするとオシャレなデザインになります。

ここではCSSでグラデーションのかかった立体感のあるボタンを作る方法を解説します。

必要な知識

ボタンを作る前に今回立体的なボタンを作るのに必要なCSSのプロパティについていくつか説明します。

グラデーション(linear-gradient)について

従来の方法ではグラデーションを指定するには画像を作り、それを要素の背景に設定する方法が一般的でしたが、CSS3からは標準でグラデーションがサポートされました。

ここで使うのは線形グラデーションで次のようにbackgroundプロパティにlinear-gradient関数を渡します。

background: linear-gradient(to right, red, blue);

linear-gradient関数は次のような引数をとります。

linear-gradient(方向, 開始色, 途中色..., 終了色)

まず１つめの引数の方向には次の２種類の方法でグラデーションの向きを渡します。

• 角度
  単位(deg)をつけた角度。0を指定すると上から下のグラデーションになり、90degを指定すると左から右にグラデーションする。
• to [方向を表すキーワード]
  to rightのように to のあとに方向を表すキーワードをつけるとその方向にグラデーションする。とれる引数は[left, top, right, bottom]の４つ。

例えば次のように向きを指定します。

background: linear-gradient(to right, red, blue);

このCSSを適用すると次のように左から右に赤から青でグラデーションされます。

次に２つ目以降の引数にはグラデーションに使う色を指定します。開始色と終了色は必須でその間にはいくらでも色を挟むことが可能です。

また途中色の場合はカラーコードなどの後に%を指定することでカラーストップを置くことも可能です。例えば次はカラーストップを置く例です。

background: linear-gradient(to right, red, green 20%, purple 50%, blue);

このCSSを適用すると次のように全体の20%の部分で緑に変り、全体の50%の部分から紫でグラデーションできます。

ボックスシャドウ(box-shadow)について

立体的なボタンを作るにはbox-shadowプロパティで要素に影を適用します。

box-shadowプロパティはCSS3で追加されたプロパティで例えば次のように影を指定できます。

box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5)

影は４つの値で定義され、色は最後に指定できます。影を定義する４つの値はそれぞれ順番に次の意味を持ちます。

• １番目の値
  水平方向の影のオフセット値。正の値を指定すると右に、負の値を指定すると左側に影ができる
• ２番目の値
  垂直方向の影のオフセット値。正の値を指定すると下に、負の値を指定すると上に影ができる
• ３番目の値
  影のぼかし距離。値が大きいほど影が大きくなり、０を指定するとぼかしのないくっきりした長方形になる
• ４番目の値
  影の広がり距離。正の値を指定すると影を全方向に伸ばし、負の値を指定すると内側に縮小する

例えば右方向に10px,、下方向に15px、ぼかし距離が10px、広がり距離が5pxで色が青色の影を作る場合は次のCSSを書きます。

box-shadow: 10px 15px 10px 5px blue;

このCSSを適用すると次のように要素に影が付きます。影をつける要素が青色でも影は青色にはならないので注意してください。

立体的なボタンを作る場合は要素にこのbox-shadowプロパティに加えてボーダーの角を丸めるborder-radiusプロパティを指定します。

立体的なボタンの作り方

ここまで解説したプロパティを知っていれば立体的でグラデーションのかかったボタンを作れます。

ボタンを作るときはaタグをボタンに見立ててスタイルを適用する場合とフォームで使われるbuttonタグを加工する場合がありますが、今回紹介する方法はa要素とbutton要素のどちらでも使える方法です。

次が立体的なボタンのコード例です。

HTMLコード

<a href="hogehoge" class="btn_3d">ボタン</a>

CSSコード

.btn_3d
{
  background: linear-gradient(to left, #F11, #F55); 
  box-shadow: 0px 9px 0px #a00;  
  border-radius: 10px; 
  border-bottom-left-radius: 12px; 
  border-bottom-right-radius: 12px; 
  border-bottom: 1px solid #F00;
  border: none;
  display: inline-block;
  padding: 15px 80px; 
  text-decoration:none;
  font-size: large;
}

このボタンはブラウザ上では次のように表示されます。この画像のように左から薄い赤から濃い赤にグラデーションするような見た目になっています。

またbuttonタグに同じスタイルを適用した場合は次のようになります。

ちなみにグラデーションを入れない場合は次のようにフラットな見た目のボタンになります。フラットデザインのサイトにはこっちのボタンの方が良いかもしれません。

ボタンをクリックしたときの動作を追加する

こういう立体的なボタンを作ってもクリックしたときに何の動作がないと味気ないです。そこで仕上げとして次のようなactive疑似クラスを追加します。

.btn_3d:active, 
{
    box-shadow: 0px 0px 0px #a00; 
    transform: translateY(9px);
}

active疑似クラスを定義するとクリックしたときにその疑似クラス内で定義したスタイルが適用されます。

まずクリックされたときにbox-shadowを消します。しかしそれだと影がなくなるだけでボタンを押したという感じがありません。

そこでtransform属性にtranslateX関数を渡すことで消えた影の長さ分の9pxだけ下方向にボタンを移動しています。これで実際にボタンを押すという動作を再現することが可能です。

以下がコードと実行例です。実際にボタンを押すとどのように動くのかが分かります。

See the Pen CSSだけでクリックできる立体ボタン by kaz1503 (@kaz1503) on CodePen.dark

以上CSSでグラデーション有りの立体的なボタンを作る方法について解説しました。読者がクリックしたくなるようなボタンを作ってみてください。