2013/07/17

CSSだけでここまでできる!キレイなボタンの作り方

CSSだけでここまでできる!キレイなボタンの作り方

CSS3ではテキストシャドウや角丸、グラデーションなどの指定が出来るため、画像でなくてもある程度のデザイン表現ができるようになりました。

今回はボタン作りに必須な、「border-radius」「box-shadow」「text-shadow」「gradient」の使い方をご紹介していきます。

ボタンを作成

まずはボタンを作ります。
今回はフォントサイズ24pxで作成します。

<a href="#" class="sample">Button</a>

htmlはこれだけです。
以降書き換えたり、増えることはありません。

.sample {
    width:200px;
    font-size:24px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#333;
    border:1px solid #333;
}

Button

上記のCSSを適用するとこのような、文字と枠だけのボタンができます。
これをベースに装飾していきます。

ボタンの色(background-color)

Button

今回は青系のボタンにします。
CSSは以下になります。

.sample {
    width:200px;
    font-size:24px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#49a9d4;
}

背景に色をつけたので、borderをなくし、colorは白に変更しています。

角丸(border-radius)

border-radiusを使用して角を丸くしてみます。

・3pxの場合

Button

・5pxの場合

Button

・10pxの場合

Button

・25pxの場合

Button

このように、数値が大きくなればなるほど丸みが大きくなります。
あまりやりすぎると不自然になってしまうので気をつけましょう。
今回は5pxを適用します。

.sample {
    width:200px;
    font-size:24px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#49a9d4;
    border-radius:5px;
}

ボックシャドウ(box-shadow)

続いてbox-shadowを使ってボタンに影をつけてみます。
影は2~4つの値で大きさや伸ばす方向を指定します。

box-shadow:○px ○px ○px ○px #000;

○部分に数値を指定します。

  • ・1番目の値は、水平方向の距離を指定します。
  • ・2番目の値は、垂直方向の距離を指定します。
  • ・3番目の値は、ぼかし距離です。値が大きいほど、ぼかしが強くなります。
  • ・4番目の値は、広がり距離です。正の値を指定すると拡大し、負の値を指定すると縮小します。
  • ・最後に影の色を指定します。

Button

box-shadow:2px 2px #555;

Button

box-shadow:4px 4px #555;

数値を大きくすると影が大きくなります。

Button

box-shadow:2px 2px 2px #555;

影を2pxぼかしています。

Button

box-shadow:2px 2px #1a6ea0;

ぼかしをなくして影の色を同系統の色にしました。
こちらのCSSは以下になります。

.sample {
    width:200px;
    font-size:24px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#49a9d4;
    border-radius:5px;
    box-shadow:2px 2px #1a6ea0;
}

テキストシャドウ(text-shadow)

text-shadowでテキストに影をつけて立体感を出します。
値を指定することで、水平方向の距離、垂直方向の距離、影のぼかし、色を指定することができます。

box-shadow:○px ○px ○px #000;

○部分に数値を指定します。

  • ・1番目の値は、水平方向の距離を指定します。
  • ・2番目の値は、垂直方向の距離を指定します。
  • ・3番目の値は、ぼかし距離です。
  • ・最後に影の色を指定します。

Button

text-shadow:1px 1px #555;

Button

text-shadow:-1px -1px #555;

Button

text-shadow:0 -1px #1a6ea0;

上方向のみに、同系統の色を指定しました。
同系統の色にすることによって自然な影を作ることができます。

.sample {
    width:200px;
    font-size:24px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#49a9d4;
    border-radius:5px;
    box-shadow:2px 2px #1a6ea0;
    text-shadow:0 -1px #1a6ea0;
}

これらのCSSでフラットデザインのボタンを作成することが可能です。
色の組み合わせや影の調整によって様々なデザインを作ることができます。

グラデーション(gradient)

背景をグラデーションにすることで、立体感を出すことができます。
グラデーションは色が違いすぎると安っぽく見えてしまいますので注意が必要です。
まずは記述方法を説明します。

.sample {
    background-image:-moz-グラデーションの種類-gradient(
    グラデーションの方向,
    色 領域%,
    色 領域%,
    色);

    background-image:-webkit-gradient(
    グラデーションの種類,
    開始位置,終了位置,
    from(開始色),
    color-stop(領域,色),
    color-stop(領域,色),
    to(終了色));
}

グラデーションの書式はブラウザによって異なるので、それぞれのブラウザに対応した記述をする必要があります。

グラデーションの種類

グラデーションの種類は2種類あります。

  • ・線形グラデーションは「linear」
  • ・円形グラデーションは「radial」

と指定します。
種類を記述する場所がFirefoxとWebkit系では異なるので注意が必要です。

.sample {
    /*線形*/
    background-image:-moz-linear-gradient();
    background-image:-webkit-gradient(linear);

    /*円形*/
    background-image:-moz-radial-gradient();
    background-image:-webkit-gradient(radial);
}

グラデーションの方向

.sample {
    /*上から下へ*/
    background-image:-moz-linear-gradient(top);
    background-image:-webkit-gradient(linear,left top,left bottom);

    /*下から上へ*/
    background-image:-moz-linear-gradient(bottom);
    background-image:-webkit-gradient(linear,left bottom,left top);

    /*左から右へ*/
    background-image:-moz-linear-gradient(left);
    background-image:-webkit-gradient(linear,left top,right bottom);

    /*右から左へ*/
    background-image:-moz-linear-gradient(right);
    background-image:-webkit-gradient(linear,right top,left bottom);
}

Firefoxでは「top」のみで、「上から下へグラデーション」という意味になります。
「left」と記述した場合は「左から右へグラデーション」されます。

Webkit系ではもう少し詳しい記述方法になります。
例えば、「上から下へグラデーション」したい場合には「left top,left bottom」と記述します。
縦方向なので、「center top,centr bottom」や「right top,right bottom」でも同じ意味になります。

「左から右へグラデーション」なら、「left top,right top」と書きます。
こちらも、「left bottom,right bottom」でも同じ意味になります。

色の領域

色の指定には16進数とrgbaで指定する方法の2種類があります。

.sample {
    background-image:-moz-linear-gradient(
    top,
    #fff 0%,
    #000);

    background-image:-webkit-gradient(
    liear,left top,left bottom,
    from(#fff),
    to(#000));
}

Firefoxでは領域を○%で指定しますが、Webkit系では0~1の小数点で指定します。

Button

sample {
    background-image:-moz-linear-gradient(
    top,
    #49a9d4 0%,
    #2989d8 40%,
    #2285d6 52%,
    #2989d8);

    background-image:-webkit-gradient(
    linear,left top,left bottom,
    from(#49a9d4),
    color-stop(0.49,#2989d8),
    color-stop(0.52,#2285d6),
    to(#2989d8));
}

Button

sample {
    background-image:-moz-linear-gradient(
    top,
    #ffa035 0%,
    #ff8300);

    background-image:-webkit-gradient(
    linear,left top,left bottom,
    from(#ffa035),
    to(#ff8300));
}

Button

sample {
    background-image:-moz-linear-gradient(
    top,
    #49a9d4 0%,
    #49a9d4 49%,
    #419cd8 50%,
    #419cd8);

    background-image:-webkit-gradient(
    linear,left top,left bottom,
    from(#49a9d4),
    color-stop(0.49,#49a9d4),
    color-stop(0.50,#419cde8),
    to(#419cd8));
}

Button

sample {
    background-image:-moz-linear-gradient(
    top,
    #4ffa035 0%,
    #4ffa035 49%,
    #ff8300 50%,
    #ff8300);

    background-image:-webkit-gradient(
    linear,left top,left bottom,
    from(#4ffa035),
    color-stop(0.49,#4ffa035),
    color-stop(0.50,#ff8300),
    to(#ff8300));
}

0~49%、50~100%で同じ色を指定すると、このようにフラットなデザインを作ることも出来ます。
最初は使いこなすのはとても難しいと思うので、ジェネレータを使って感覚を覚えるのもいいかと思います。

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator

まとめ

以前は立体的なボタンが主流でしたが、最近はフラットデザインが流行っているので、フラットなデザインを中心にご紹介しました。

シンプルなデザインなら画像と大差なく、データの軽量化もできるので、是非使ってみて下さい。