CSS3でベーシックなボタンを作成するチュートリアル

シンプルなボタン

CSS2で画像を使用しなければこのせいぜいこの程度のボタンしかできないだろう。

CSS2までのボタン

1
<a href="#" id="btn01">BUTTON</a>

1
a#btn01 {
2
  color:#666666;
3
  background: #E4E4E4;
4
  border: 1px solid #CCCCCC;
5
  font-size: 116%;
6
  padding: 10px 30px;
7
  width: 5em;
8
  display: block;
9
  text-align: center;
10
  font-weight: bold;
11
  text-decoration: none;
12
}

テキストシャドウ（影）をかけてみる

そしてここからがCSS3。
テキストに影を付けるとこんな感じになる。

テキストシャドウのかかったボタン

CSSの記述はこんな感じ。

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

テキストシャドウ説明

カンマ「,」区切りで複数の影を付けることができる。

1
text-shadow: 1px 1px 1px #FFF, -1px -1px 1px #000;

グラデーションをかけてみる

現状グラデーションはChrome,Safariなどのwebkit系のブラウザと、FirefoxなどのMozilla系で別々に指定する必要がある。

グラデーションのかかったボタン

CSSの記述はこんな感じ。

1
background : -webkit-gradient(linear,left top, left bottom,
2
  from(#F2F2F2), to(#BEBEBE));
3
background : -moz-linear-gradient(top, #F2F2F2, #BEBEBE);

グラデーション説明

webkit系は「from」「to」の間に「color-stop」でカラーと位置を指定、mozila系はカラーと位置を「,」で複数指定することによってグラデーションの色を追加することができる。

1
background : -webkit-gradient(linear, left top, left bottom,
2
  from(#F0F0F0),
3
  color-stop(0.45, #FDFDFD),
4
  color-stop(0.5, #CCCCCC),
5
  to(#F3F3F3));
6
background : -moz-linear-gradient(top,
7
  #F0F0F0,
8
  #FDFDFD 45%,
9
  #CCCCCC 50%,
10
  #F3F3F3);

角丸にしてみる

角丸のかかったボタン

角丸はすべての角度を同じにする場合は数値は一つだけ指定する。

1
-webkit-border-radius: 5px;
2
-moz-border-radius: 5px;

もし個別に角度を変えたい場合は「,」で区切り指定する。

1
-webkit-border-radius: 5px 20px 5px 20px;
2
-moz-border-radius: 5px 20px 5px 20px;

さらに円を楕円にしたいときは「/」で区切り水平サイズを指定する。

1
-webkit-border-radius: 5px 20px 5px 20px / 10px 30px 10px 30px;
2
-moz-border-radius: 5px 20px 5px 20px / 10px 30px 10px 30px;

ボックスにシャドウ（影）をかけてみる

シャドウのかかったボタン

1
-moz-box-shadow: 2px 4px 2px #EBEBEB;
2
-webkit-box-shadow: 2px 4px 2px #EBEBEB;

指定方法はテキストシャドウと変わらないですね。

ボックスシャドウ説明

マウスオーバー設定

最後にマウスオーバーの設定をする。
これは特別CSS3だからというのはなく普通に「hover」で設定する。

1
a#btn01:hover {
2
  color:#FFFFFF;
3
  /* グラデーション */
4
  background : -webkit-gradient(linear, left top, left bottom,
5
    from(#CCCCCC), to(#808080));
6
  background : -moz-linear-gradient(top, #CCCCCC, #808080);
7
  /* テキストシャドウ */
8
  text-shadow: -1px -1px 1px #666;
9
}