…ここからが続き

サンプル 1 の解説

デモページでは、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