[CSS]画像無しで作成する美しいデザインのボタンのスタイルシート

Photoshopで作成したかのような美しいデザインのボタンを実装するスタイルシートを紹介します。

キャプチャは上から、ノーマル時、ホバー時、クリック時です。

Make CSS3 buttons that are extremely fancy
デモページ
デモページ（カラーバリエーション）
※更新：カラーバリエーションを増やしました。

ボタンはCSSで実装されているため、ブラウザの文字サイズの拡大に伴いサイズも変更し、カラー変更も簡単におこなえるように設計されています。
※CSS3非対応のIE7/8などでの見栄えはそれなりになります。

実装はシンプルながらもテクニカルで、先日当サイトで紹介した「Safariで見かける角丸のにじみを解消するスタイルシート」なども利用されています。

HTML

ボタンのカラー変更が簡単にできるようにインラインスタイルシートを使用しています（下記キャプチャ参照）。

<div class="fancy_button">
	<a href="#">
		<span style="background-color: #070;">Post</span>
	</a>
</div>

背景色（background-color）を「#000」に変更

CSS

CSS3の指定はオンラインサービスを利用すると、手軽にできます。

• CSS3グラデーション：Grad? Gradient!
• 角丸やシャドウなど：CSS3 Playground

div.fancy_button {
	float: left;
	border-width: 1px;
	border-style: solid;
	border-color: transparent transparent #666 transparent;
	border-color: transparent transparent rgba(202,202,202,0.27) transparent;
	-webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px;
	-webkit-background-clip: padding-box;
}

div.fancy_button a {
	background: #555;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(77,77,77,0.4)));
	background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(77,77,77,0.4));
	float: left;
	padding: 4px;
	text-decoration: none;
	outline: 0;
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
	-webkit-background-clip: padding-box;
}

div.fancy_button a span {
	display: block;
	letter-spacing: -1px;
	border-width: 1px;
	border-style: solid;
	border-color: #ccc #444 #111 #444;
	border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.3) rgba(0,0,0,0.6) rgba(0,0,0,0.3);
	font: bold 21px/1em Arial;
	color: white;
	padding: 0.48em 2em;
	text-shadow: rgba(0,0,0,0.45) 0 -1px 0;
	-webkit-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; box-shadow: rgba(0,0,0,0.75) 0px 0px 3px;
	-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
	background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.6)), color-stop(0.5, rgba(255,255,255,0.15)), color-stop(0.5, rgba(255,255,255,0.01)), to(transparent));
	background: transparent -moz-linear-gradient(top, rgba(255,255,255,0.6), rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.01) 50%, transparent);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80FFFFFF', endColorstr='#00FFFFFF');
  -webkit-background-clip: padding-box;
}

div.fancy_button a:hover span {
	border-top-color: rgba(255,255,255,0.65);
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(220,220,220,0.6)), color-stop(0.5, rgba(100,100,100,0.2)), color-stop(0.5, rgba(0,0,0,0.21)), to(rgba(0, 0, 0, 0.20)));
	background: -moz-linear-gradient(top, rgba(220,220,220,0.6), rgba(100,100,100,0.2) 50%, rgba(0,0,0,0.21) 50%, rgba(0, 0, 0, 0.20));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99dcdcdc', endColorstr='#33000000');
	-webkit-background-clip: padding-box;
}

div.fancy_button a:active span {
	border-top-color: rgba(255,255,255,0.2);
	border-left-color: rgba(0,0,0,0.4);
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(150,150,150,0.6)), color-stop(0.5, rgba(60,60,60,0.6)), color-stop(0.5, rgba(40,40,40,0.6)), to(rgba(20, 20, 20, 0.5)));
	background: -moz-linear-gradient(top, rgba(150,150,150,0.6), rgba(60,60,60,0.6) 50%, rgba(40,40,40,0.6) 50%, rgba(20, 20, 20, 0.5));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80969696', endColorstr='#59000000');
	-webkit-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px; box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px;
	-webkit-background-clip: padding-box;
}

div.fancy_button a span:active {
	border-top-color: rgba(255,255,255,0.2);
	border-left-color: rgba(0,0,0,0.4);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80969696', endColorstr='#59000000');
}