CSS3の勉強になるかも！？画像を使わないボタンの作成手順

今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。

0. 最初の状態

HTMLはとてもシンプルです。これは最後まで変えません。

<a href="#" id="button">button</a>

あと今回のサンプルは何となくGoogle Web Fontsを使っています。

<link href='http://fonts.googleapis.com/css?family=Corben:400,700' rel='stylesheet' type='text/css'>

CSSはこんな感じで、見やすいようにフォントサイズは大きくしています。ここに色んなプロパティを追加していきます。

#button {
  font-size:28px;
  font-weight:bold;
}

1. ボタンにしてみる

まず、リンクをボックス状にして枠の中であればクリックできるようにします。

#button {
  width:300px;
  font-size:28px;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
}

追加した部分のコードは色を変えています。下線は消して、paddingで間隔を取っています。

2. 丸みを付けて白抜きにしてみる

border-radiusを使って角を丸くします。あと背景を青っぽく、テキストを白にします。

#button {
  width:300px;
  color:#ffffff;
  background:#337fcc;
  font-size:28px;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:5px;
}

これでボタンっぽくなりましたが、せっかくなのでさらに装飾していきます。

3. テキストに影を付けてみる

テキストに影を付けることで立体感が出ます。

#button {
  width:300px;
  color:#ffffff;
  background:#337fcc;
  font-size:28px;
  font-weight:bold;
  text-shadow:0 -1px 0px #225588,0 -2px 0px #225588;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:5px;
  margin-bottom:20px;
}

カンマで区切るといくつでも影を追加することができます。下に影を付けてもいいですね。

#button {
  width:300px;
  color:#ffffff;
  background:#337fcc;
  font-size:28px;
  font-weight:bold;
  text-shadow:0 1px 0px #143352,0 2px 0px #143352;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:5px;
  margin-bottom:20px;
}

フォントサイズが大きいので2重に影を付けています。

4. 背景をグラデーションにしてみる

背景をグラデーションにするとふっくらした感じがします。色が違いすぎると安っぽくなるので、微妙なグラデーションにしています。

#button {
  width:300px;
  color:#ffffff;
  background:#337fcc;
  font-size:28px;
  font-weight:bold;
  text-shadow:0 -1px 0px #225588,0 -2px 0px #225588;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:5px;
  background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
}

グラデーションの色にはRGBAカラーを使っています。もちろん6桁のカラーコードでもいいのですが、透明度だけ違う2色でグラデーションを作ると自然な感じになります。

RGBAカラーはIE8以下では使えませんが、そもそもIEはグラデーション自体使えないのでここは気にせずを使っています。

グラデーションは慣れるまで難しいです。今回は上『rgba(34,85,136,0.5)』から下『rgba(34,85,136,1)』へのグラデーションになります。

ちなみに、グラデーションの下側はボーダーと同じ色にしています。

5. 内側にラインを追加してみる

1pxのボーダーがあると印象が大きく違ってきますね。

今回はbox-shadowを使って上下に薄い色のボーダーを入れています。ついでにボタンの外にも影を入れています。

#button {
  width:300px;
  color:#ffffff;
  background:#337fcc;
  font-size:28px;
  font-weight:bold;
  text-shadow:0 -1px 0px #225588,0 -2px 0px #225588;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:5px;
  background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
  box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}

3つ目の「ぼかし具合」と、4つ目の「影の長さ」は省略可能です。

今回は3つの影を使っていて、最初で外側に、2つ目で上に、3つ目で下に影を付けています。

6. マウスを乗せたとき

画像なのでマウスを乗せた感じは分かりませんが、実際は少し色が薄くなります。サンプルでご確認ください。

#button {
  width:300px;
  color:#ffffff;
  background:#337fcc;
  font-size:28px;
  font-weight:bold;
  text-shadow:0 -1px 0px #225588,0 -2px 0px #225588;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:5px;
  background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
  box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}
a#button:hover {
  background:-moz-linear-gradient(rgba(34,85,136,0.4), rgba(34,85,136,0.9));
  background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.4)), to(rgba(119,170,221,0.9)));
}

マウスを乗せたときに透明度を変えて薄くしています。こんなときにRGBAカラーは便利です。

7. 背景を変えてみる

ちょっと寄り道してボタンの背景を変えてみます。

まずはボーダー。

#button {
  width:300px;
  color:#ffffff;
  background:#337fcc;
  font-size:28px;
  font-weight:bold;
  text-shadow:0 -1px 0px #225588,0 -2px 0px #225588;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:5px;
  background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
  background-size:auto 2px;
  box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}
a#button:hover {
  background:-moz-linear-gradient(rgba(34,85,136,0.4), rgba(34,85,136,0.9));
  background:-webkit-gradient(linear, 100% 100%, 100% 0%, from(rgba(34,85,136,0.4)), to(rgba(34,85,136,0.9)));
  background-size:auto 2px;
}

background-sizeを使って背景を繰り返しにしています。縦2pxのグラデーションの繰り返してボーダーっぽくしています。

続いてドット。

#button {
  width:300px;
  color:#ffffff;
  background:#337fcc;
  font-size:28px;
  font-weight:bold;
  text-shadow:0 -1px 0px #225588,0 -2px 0px #225588;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:5px;
  background: -moz-radial-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background: -webkit-gradient(radial, center center, 1, center center, 2, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
  background-size:3px 3px;
  box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}
a#button:hover {
  background: -moz-radial-gradient(rgba(34,85,136,0.4), rgba(34,85,136,0.9));
  background: -webkit-gradient(radial, center center, 1, center center, 2, from(rgba(34,85,136,0.4)), to(rgba(34,85,136,0.9)));
  background-size:3px 3px;
}

これもグラデーションを使っています。

8. 立体的にしてみる

最後は立体的にしてみます。

#button {
  width:300px;
  color:#e4eef8;
  background:#337fcc;
  font-size:28px;
  font-weight:bold;
  text-shadow:0 -1px 1px #143352;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:12px;
  background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
  box-shadow:0px 1px 0px #1b446d,
             0px 2px 0px #1b446d,
			 0px 3px 0px #1b446d,
			 0px 4px 0px #1b446d,
			 0px 5px 0px #1b446d,
			 0px 6px 0px #1b446d,
			 0px 7px 0px #1b446d,
			 2px 7px 3px rgba(0,0,0,0.3),
			 0px 1px 0px rgba(255,255,255,0.5) inset,
			 0px -1px 0px rgba(255,255,255,0.2) inset;
}
a#button:hover {
  background:-moz-linear-gradient(rgba(119,170,221,0.9), rgba(34,85,136,0.9));
  background:-webkit-gradient(linear, 100% 100%, 100% 0%, from(rgba(34,85,136,0.9)), to(rgba(119,170,221,0.9)));
  box-shadow:0px 1px 0px #225588,
             0px 2px 0px #225588,
			 0px 3px 0px #225588,
			 0px 4px 0px #225588,
			 0px 5px 0px #225588,
			 0px 6px 0px #225588,
			 0px 7px 0px #225588,
			 2px 7px 3px rgba(0,0,0,0.3),
			 0px 1px 0px rgba(255,255,255,0.5) inset,
			 0px -1px 0px rgba(255,255,255,0.2) inset;
}

box-shadowをたくさん使って立体感を表現しています。「自由自在！CSS3のtext-shadowを使ってをロゴ作ってみる」で紹介したtext-shadowと原理は一緒です。

まとめ

ということで、普通のリンクから色んなボタンへと変化させてみました。

IEが対応していない部分もありますが、スマホ用サイトだとかなり実用的ですし、かなりきれいに見えます。

あと個人的にRGBAカラーっていつ使うのかなと思っていたのですが、今回でかなり便利だということに気付きました。

順を追って紹介しましたので、「これを追加するとこうなるのか～」って感じに見ていけば理解が深まるのかなと思います。

参考になれば幸いです。