CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Mizoue

作ってみました第3弾です。

よくありがちなボタンをサクッと作ってみました。

作りたいボタンのデザインはこんな感じです。3パターンあります。
デザイン

作ってみました。
CSSサンプル

.test .btn {
	width:198px;
	margin:0 auto 15px;
	border:1px solid #B8946A;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	background: -moz-linear-gradient(top, #E8DCCD, #C0A178);
	background: -webkit-gradient(linear, left top, left bottom, from(#E8DCCD), to(#C0A178));
	text-align:center;
}
.test .btn a {
	display:block;
	width:188px;
	padding:6px 5px;
	text-decoration:none;
	color:#40311E;
	font-size:117%;
}
.test .btn a:hover {
	text-decoration:underline;
}

.test .lich {
	-moz-box-shadow:0 0 3px #BBB;
	-webkit-box-shadow:0 0 3px #BBB;
}
.test .lich a {
	width:186px;
	border:1px solid #F0E9DF;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}

.test .extra {
	-moz-box-shadow:0 0 3px #BBB;
	-webkit-box-shadow:0 0 3px #BBB;
	background: -moz-linear-gradient(top, #D4BEA2, #D4BEA2 25%, #DAC7AF 50%, #CCB392 50%, #E7DBCB);
	background: -webkit-gradient(linear, left top, left bottom, from(#D4BEA2), color-stop(0.25, #D4BEA2), color-stop(0.5, #DAC7AF), color-stop(0.5, #CCB392), to(#E7DBCB));
}
.test .extra a {
	width:186px;
	border:1px solid #F0E9DF;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}

HTMLサンプル

※例によってサンプルは直接ソースを御覧ください!

これまでは色々と画像を用意したり、テキストサイズの変更に対応するためタグを増やしたり
色々と大変でしたが、こんな感じにCSSだけでサックリと作れます。

え?3つ目の見た目がデザインと違う?
3つ目のデザイン

実際の表示

ああ、なるほど!
中央のライン、角丸だったんですね。

では、無理やり実現してみました。

無理やりサンプル

.test .super {
	-moz-box-shadow:0 0 3px #BBB;
	-webkit-box-shadow:0 0 3px #BBB;
	background: -moz-linear-gradient(top, #CCB392, #CCB392 50%, #E7DBCB);
	background: -webkit-gradient(linear, left top, left bottom, from(#CCB392), color-stop(0.5, #CCB392), to(#C0A178));
}
.test .super span {
	display:block;
}
.test .super .inframe {
	position:relative;
	height:33px;
	border:1px solid #EFE8DE;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
.test .super .inframe .upcover {
	position:absolute;
	width:196px;
	height:17px;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	background: -moz-linear-gradient(top, #D4BEA2, #D4BEA2 50%, #DAC7AF);
	background: -webkit-gradient(linear, left top, left bottom, from(#D4BEA2), color-stop(0.5, #D4BEA2), to(#DAC7AF));
}
.test .super a {
	position:absolute;
	top:0;
	left:0;
	width:196px;
}

HTMLサンプル

※強引な力技による再現です。実際にご使用される場合には注意してくださいね!

こんな感じでなんとか再現できました。
テキストサイズが変わった場合の再現が出来てませんし、spanタグが2重だし、
なんだか・・・な感じですがこだわる必要がある場合はいかがでしょうか?

Subscribe:
pagetop