スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。

css3-button-tittle.png

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

別サーバーにサンプルを用意してみました - サンプル
【追記】
IEに対応していなくて残念という声を頂きましたので、できるところまで作ってみました。 IEでもそこそこできる!CSSで作る画像のようなボタン

0. 最初の状態

ボタンのサンプル

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

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

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

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

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

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

1. ボタンにしてみる

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

ボタンのサンプル
CSS
#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を使って角を丸くします。あと背景を青っぽく、テキストを白にします。

ボタンのサンプル
CSS
#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. テキストに影を付けてみる

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

ボタンのサンプル
CSS
#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;
}

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

ボタンのサンプル
CSS
#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. 背景をグラデーションにしてみる

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

ボタンのサンプル
CSS
#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

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

ジェネレータを使うと何となく感覚が分かってくると思いますのでぜひ。
CSS3プロパティの勉強になるジェネレータ16個

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

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

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

ボタンのサンプル

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

CSS
#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;
}
rgba

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

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

6. マウスを乗せたとき

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

ボタンのサンプル
CSS
#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. 背景を変えてみる

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

まずはボーダー。

ボタンのサンプル
CSS
#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のグラデーションの繰り返してボーダーっぽくしています。

続いてドット。

ボタンのサンプル
CSS
#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. 立体的にしてみる

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

ボタンのサンプル
CSS
#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と原理は一緒です。

【追記】
box-shadowは0px 7px 0px #225588からでもいいのでは?というご意見をいただきました。今回の場合 border-radiusを使っているためか、0px 7px 0px #225588からにすると丸くした角が荒くなってしまいましたので一応1pxずつ重ねてみました。border-radiusを使わない場合box-shadowは0px 7px 0px #225588でいいと思います。

まとめ

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

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

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

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

参考になれば幸いです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
すごくわかりやすかったです
【2013/04/12 11:35】 | t #dOcone5o | [edit]
tさん

お役に立ててよかったです。
またお立ち寄りください~
【2013/04/13 06:00】 | 管理人 #E2ywrYdA | [edit]
はじめまして!
私はエムブロのブロガーです。


装飾ボタンで検索してここに
辿り着きました。

ジャンプボタンというのでしょうか…
コメントボックス、コメントボタン等をccsで装飾したのですが
できませんでした…


box input[type="submit"]:{color: #A28F8B; border:dotted #e6c0c0 1px; }

buttonとか色々タグを試したのですが
上のは一部のタグです。

どうかできるようによろしくお願い致します。



【2014/04/25 15:51】 | 花子 #6wH.DH8I | [edit]
花子さま

ご質問の件ですが、「:」が必要ないのではないでしょうか?

あと、スマホで見たときに変になるのは、以下のコードの追加で解決できます。

-webkit-appearance: none;
【2014/04/27 06:57】 | 管理人 #E2ywrYdA | [edit]
おはようございます(^-^)
早速のお返事
ありがとうございました!
昨夜トライしてみたのですが
できませんでした(;_;)

カテゴリーリンクで
2014年4月 移動

コメント欄とコメントするの枠線を
統一して色を変えてドットにしたかったのです…

スタイルシートとか初心者で理解してませんが
自分なりに調べてテンプレートを作成しています

どうかまたできるように
ご指導よろしくお願い致します!



【2014/04/28 08:29】 | 花子 #- | [edit]
花子さま

お返事遅くなり申し訳ございません。

コメント欄やコメントフォームはサイトによってHTMLの構造も様々ですので
お答えするのは難しいと思います。

CSSによるボタン装飾に関しては以下のサイトなどが分かりやすいと思います。

http://www.css-lecture.com/log/css3/css3-button-sample.html
【2014/05/08 06:25】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。