CSS3 でボタンを作る為のテクニック、サンプル集

CSS3 でボタンを作る為のテクニック、サンプル集

CSS3 の基礎をいくつかに渡り紹介していたのですが、その後手付かず...今回はパーツの一部ですが、ボタンのサンプルを作ったので作り方を紹介をしたいと思います。

サンプルは今後自分もコピペでも作れるようシンプルなものにしたので、使えそうと思った際はお好きに使って下さい。

Domo Page

…ここからが続き

サンプル 1 の解説

デモページでは、html5 を使用し、「button」「input type、button reset submit」の4パターンで記載しているのですが、解説って事もあり「button」のみを書いていきたいと思います。

HTML

<section class="demo1">
<p><button>Button</button></p>
</section>

余白をつけたり、ボーダーをつけたりなど CSS3 使わずに装飾

解説1

右と下だけボーダーの色を濃く。(google 風にww)

.demo1 button	{
	border-top: 1px solid #ccc;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	border-left: 1px solid #ccc;
	padding: 5px 20px;
	font-weight: bold;
	cursor: pointer;
	color: #666;
}

角円、テキスト、ボックスの装飾

解説2

これで少し立体感のある作りに。

.demo1 button	{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #aaa;
	-webkit-box-shadow: 1px 1px 2px #E7E7E7;
	-moz-box-shadow: 1px 1px 2px #E7E7E7;
}

背景色をグラデーションに

解説3

最上部と最下部だけ少し色を変えちゃったりしてます。

.demo1 button {
	background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));
}

マウスオーバー時のアクション

解説4

やや暗めの色に装飾。

.demo1 button:hover	{
	background: -moz-linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #e1e1e1), color-stop(0.5, #e1e1e1), color-stop(0.99, #cfcfcf), to(#ccc));
}

クリック時のアクション

解説5

凹んだ風味にしたつもり。

.demo1 button:active	{
	background: #ccc;
	padding: 6px 20px 4px;
}

サンプル 1

サンプル 1

HTML

<section class="demo1">
<h1>サンプル1</h1>
<p><button>Button</button></p>
<p><input type="button" name="button" value="input button"></p>
<p><input type="reset" name="reset" value="Reset"><br><input type="submit" name="submit" value="Submit"></p>
</section>

CSS

.demo1 button, .demo1 input[type=button],
.demo1 input[type=reset], .demo1 input[type=submit] {
	background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));
	-moz-box-shadow: 1px 1px 2px #E7E7E7;
	-webkit-box-shadow: 1px 1px 2px #E7E7E7;
}
.demo1 button:hover, .demo1 input[type=button]:hover,
.demo1 input[type=reset]:hover, .demo1 input[type=submit]:hover	{
	background: -moz-linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #e1e1e1), color-stop(0.5, #e1e1e1), color-stop(0.99, #cfcfcf), to(#ccc));
}
.demo1 button:active, .demo1 input[type=button]:active,
.demo1 input[type=reset]:active, .demo1 input[type=submit]:active	{
	background: #ccc;
	padding: 6px 20px 4px;
}

サンプル 2

サンプル 2

HTML

<section class="demo2">
<h1>サンプル2 </h1>
<p><button>Button</button></p>
<p><input type="button" name="button" value="input button"></p>
<p><input type="reset" name="reset" value="Reset"><br><input type="submit" name="submit" value="Submit"></p>
</section>

CSS

.demo2 button, .demo2 input[type=button],
.demo2 input[type=reset], .demo2 input[type=submit] {
	-webkit-box-shadow: inset 0 1px 3px #F1F1F1, inset 0 -15px #DFDFDF, 1px 1px 2px #E7E7E7;
	-moz-box-shadow: inset 0 1px 3px #F1F1F1, inset 0 -15px #DFDFDF, 1px 1px 2px #E7E7E7;
}
.demo2 button:hover, .demo2 input[type=button]:hover,
.demo2 input[type=reset]:hover, .demo2 input[type=submit]:hover {
	-webkit-box-shadow: inset 0 1px 3px #e1e1e1, inset 0 -15px #cfcfcf, 1px 1px 2px #E7E7E7;
	-moz-box-shadow: inset 0 1px 3px #e1e1e1, inset 0 -15px #cfcfcf, 1px 1px 2px #E7E7E7;
}
.demo2 button:active, .demo2 input[type=button]:active,
.demo2 input[type=reset]:active, .demo2 input[type=submit]:active	{
	background: #ccc;
	padding: 6px 20px 4px;
}

サンプル 3

サンプル 3

HTML

<section class="demo3">
<h1>サンプル3 半透明</h1>
<div>
<p><button>Button</button></p>
<p><input type="button" name="button" value="input button"></p>
<p><input type="reset" name="reset" value="Reset"><br><input type="submit" name="submit" value="Submit"></p>
</div>
</section>

CSS

.demo3 div	{
	background: url(../images/01.gif) repeat;
	padding: 10px;
}
.demo3 button, .demo3 input[type=button],
.demo3 input[type=reset], .demo3 input[type=submit] {
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.6);
	border: 1px solid rgba(0,0,0,0.4);
	background: rgba(0,0,0,0.6);
	color: #fff;
	text-shadow: 0 -1px 1px #aaa, -1px 0 1px #aaa, 1px 0 1px #000;
}
.demo3 button:hover, .demo3 input[type=button]:hover,
.demo3 input[type=reset]:hover, .demo3 input[type=submit]:hover {
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.3), inset 0 10px 20px rgba(255,255,255,0.3), inset 0 -15px 30px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.3), inset 0 10px 20px rgba(255,255,255,0.3), inset 0 -15px 30px rgba(0,0,0,0.3);
}
.demo3 button:active, .demo3 input[type=button]:active,
.demo3 input[type=reset]:active, .demo3 input[type=submit]:active {
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px rgba(0,0,0,0.3), inset 0 1px rgba(0,0,0,0.8), inset 0 10px 20px rgba(0,0,0,0.8), inset 0 -15px 30px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px rgba(0,0,0,0.3), inset 0 1px rgba(0,0,0,0.8), inset 0 10px 20px rgba(0,0,0,0.8), inset 0 -15px 30px rgba(0,0,0,0.3);
	background: rgba(0,0,0,0.7);
	padding: 6px 20px 4px;
}

その他 CSS3 ボタンに関する記事をまとめてくれるサイト

Download

Domo Page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article