CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル

Post on:2012年2月6日

CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。

サイトのキャプチャ

Styling Button Links With CSS3

[ad#ad-2]

下記は各ポイントを意訳したものです。

Step 1:ボタンの実装

ボタンの実装には、シンプルなテキストリンクを使用します。

HTML

テキストリンクにclassを付与します。

<p><a class="button-link" href="#">Button Link</a></p>

CSS

テキストリンクをボタンに見えるようスタイルしていきます。
ボタンがクリックしやすいように、paddingの値を充分に設定します。

.button-link {
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
}

上記のコードをブラウザで表示すると、下記のようになります。

デモのキャプチャ

[ad#ad-2]

このままのスタイルではボタンがフラットでつまらないので、もう少しボタンに見えるよう角丸、ボーダー、テキストシャドウ、ボックスシャドウを加えてみます。

CSS

ボーダーやCSS3の角丸・シャドウを加えます。

.button-link {
    [...]
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}

先ほどのものより、ずっと見た目のよいボタンになりました。

デモのキャプチャ

このボタンの見た目を作るためにスタイルシートがどのように役割を担っているか説明します。
まず、最初に、角丸を適用します。次に、テキストがはめ込まれたように見せるためテキストシャドウを適用します。
最後に、二つのボックスシャドウ、一つ目はボタンの上部にハイライト、二つ目はボタンの下部にシャドウです。これらを半透明な状態で適用し、ボタンを立体的に見せます。

Step 2:ホバーのスタイル

ボタンの見栄えができたので、ホバー時のスタイルを実装してみましょう。

CSS

ホバー時のスタイルは「:hover」に定義します。また、キーボードで操作することも考慮し「:focus」にも同じスタイルを定義します。

.button-link:hover, .button-link:focus {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

ホバー時のスタイルには、背景を少し暗くし、ボーダーをそれより更に暗くし、テキストリンクのアンダーラインを削除しました。

また、もっと美しくするために、アニメーションでこれらに変化するようにします。

CSS

.button-link {
    [...]
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

これで、ホバー時に0.2秒を使ってアニメーションで暗くなるボタンができました。

デモのキャプチャ

Step 3:アクティブのスタイル

いよいよ、最後のステップで、ユーザーがボタンをクリックした際のエフェクトを加えます。ここでは、ホバー時より更に暗くなるようにします。

CSS

アクティブ時のスタイルは「:active」に定義します。

.button-link:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    background: #2E5481;
    border: solid 1px #203E5F;
}

ここでのスタイルシートは、ボックスシャドウに外側の部分が含まれていないことに注意してください。これはボタンが押されている状態であり、外側にはシャドウをつくらないからです。
外側のシャドウの代わりに、ハイライト部分を暗くします。

デモのキャプチャ

オプション:テキストの選択を不可に

ボタンリンク上のテキストの選択が可能な場合、もしユーザーがボタンを2回クリックしたら、テキストがハイライトされてしまいます。
これは見た目がよくありません。

そこで、テキストの選択をできないようにしてみます。
ユーザーが、ボタンのラベルをコピー&ペーストする必要はないでしょう。

CSS

.button-link {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

まとめ:全スタイルシート

最後に、これまでのスタイルシートを全てまとめたものです。

HTML

<p><a class="button-link" href="#">Button Link</a></p>

CSS

.button-link {
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}
.button-link:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    background: #2E5481;
    border: solid 1px #203E5F;
}

sponsors

top of page

©2024 coliss