CSS3で簡単にボタン風バナーを作る

2011年12月27日

CSS3から背景にグラデーションをつけたり、ボーダーを曲線にすることができるようになりました。それを用いて、画像を使わず簡単にボタン風のバナーを作成するテクニックです。

使うプロパティは下記の通り

border-radius（ボーダーに曲線をつける）
backgroundのgradientプロパティ（背景にグラデーションをかける）

CSS

01.sampleBtn {
02    display: block;
03    font-size: 14px;
04    color: #FFF;
05    padding: 10px 20px;
06    background:linear-gradient(#fff3db, #ff3c00);
07    background: -moz-linear-gradient (
08        top,
09        #fff3db 0%,
10        #ff3c00);
11    background: -webkit-gradient (
12        linear, left top, left bottom, 
13        from(#fff3db),
14        to(#ff3c00));
15    border-radius: 5px;
16    -moz-border-radius: 5px;
17    -webkit-border-radius: 5px;
18    border: 1px solid #b85f00;
19}

HTML

`1`	`<a href="#"` `class="sampleBtn">サンプルボタン</a>`

border-radiusは値を大きくするとそれだけ角が丸くなります。backgroundのgradientプロパティについては、後日詳しくご紹介します。

注意点として、gradientプロパティはIE8以前のブラウザには対応していないこと、また各ブラウザ用に、CSSプロパティを指定する必要があることです。（プロパティの頭に付いている-moz-や-webkit-が各ブラウザ向けに指定するためのものです。）

これらは、回線速度がそれほど速くなく、極力画像は使わない方がよいスマートフォン向けのコーディングに用いると効果的です。