[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法

Post on:2011年2月3日

IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。

デモのキャプチャ

Cross-browser CSS gradient buttons
デモページ

[ad#ad-2]

ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。

デモのキャプチャ

IE7でのキャプチャ
※角丸、ボックスシャドウ、テキストシャドウなどは非対応

ホバー時・アクティブ時にも繊細なスタイルが用意されています。

デモのキャプチャ

ホバー時のキャプチャ

実装のポイント

  • スケラｰビリティ
    文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小
  • アジャスタビリティ
    padding, font-sizeを変更することでサイズ調整可能
  • フレキシビリティ
    あらゆるHTML要素に適用可能
  • コンパチビリティ
    主要ブラウザに優雅なグラデーションを提供
  • ユーザビリティ
    ノーマル時、ホバー時、アクティブ時を用意

対応ブラウザ

  • Firefox 3.6+
  • Webkit(Safari, Chrome)
  • Opera 11
  • IE6, 7, 8, 9

[ad#ad-2]

ボタンの実装

HTML

HTMLは非常にシンプルで、最小限の構成となっています。

<a href="#" class="button button-blue">
    <span>Button</span>
</a>

CSS：ボタンのベース

CSSはボタンのベースとなるスタイルシート、各カラーを適用するスタイルシートに分けます。

.button{
    margin: 10px;
    text-decoration: none;
    font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;

    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);            

    text-shadow: 0 1px 0 rgba(0,0,0,0.4);

    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span{
    -moz-border-radius: .3em;
    border-radius: .3em;
}

.button span{
    border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em;

/* The background pattern */

    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
                      -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Pattern settings */

    -moz-background-size: 3px 3px;
    -webkit-background-size: 3px 3px;
}

.button:hover{
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
}

.button:active{
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
}

CSS：ボタンのカラー

下記はカラーがブルーのスタイルシートです。

.button-blue{
    background: #4477a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}

.button-blue:hover{
    background: #81a8cb;
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
}

.button-blue:active{
    background: #4477a1;
}

Webkit系ブラウザでの記述方法

Webkit系ではCSS3グラデーションの記述方法が変わり、Firefoxと同様にシンプルになりました。

CSS3グラデーション：旧

/* Firefox */
background-image: -moz-linear-gradient(#81a8cb, #cde6f9);

/* Webkit */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cde6f9),color-stop(1, #81a8cb));

CSS3グラデーション：新

/* Firefox */
background-image: -moz-linear-gradient(#81a8cb, #cde6f9);

/* Webkit */
background-image: -webkit-linear-gradient(#81a8cb, #cde6f9);
参考：

sponsors

top of page

©2024 coliss