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

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

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

HTML

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

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

右と下だけボーダーの色を濃く。(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;
}

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

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

.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;
}

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

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

.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));
}

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

やや暗めの色に装飾。

.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));
}

クリック時のアクション

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

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

サンプル 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

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

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 ボタンに関する記事をまとめてくれるサイト

• 今のうちにチェックしておきたいCSS3　ボタンのサンプルでよく分かるその特徴
• 12 Excellent CSS3 Button and Menu Techniques

最近フッターが凄く豪華で出来てるデザインを見かける事が多いと思います。

実際に何を入れてどうデザインにしよう...迷ってる時になどの参考になるよう、綺麗で尚且つコンテンツの入っているフッターデザインをまとめたので参考にして下さい。

Carreras Con Futuro

Kdigit-studio

Ectomachine

Freelenz

Juagn Diego Velasco

Morphix

Davidhellmann

Readymadedesigns

Yodiv

florida flourish

Vill

Multiways

Jiri Tvrdek

Elan Snowboards

Ecoki

Split Da Diz

Behance Network

SamRayner.com

Missy

Blog.SpoonGraphics

Chris Sharp

GoMediaZine

I Love Typography

Jason Santa Maria

Sawyer Hollenshead

Larissa Meek

Tennessee Vacation

National Mechanics

Mecannical

Productive Dreams

Komodo Media

Odosketch

Snail bird

STPo

Sohtanaka

Bristolarchiverecords

I primi dieci

cool tribe

core engine

drupal conference

groovy webdesign

jorenrapini

vanilla vanity

Foxtie

Branded07

Du Bout Deus Yeux

Global Business IT

Michale Graves

Nimbupani Designs

justBcoz

Rubbik

Singularitydesign

vSplash

PV.M Garage

E-Business Planning

holeycoww

Komrade

Plantiis Carnivorous Plants

Yodaa

Blog Amuki