CSS3 ボタンサンプル - ウェブランサー

テキストシャドウ

Text Shadow

#TextShadow001 {
	color: #CCCCCC;
	font-size: 45px;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px rgba(0,0,0,0.7), -1px -1px rgba(255,255,255,0.7);
	padding: 5px;
}

<div id="TextShadow001">Text Shadow</div>

テキストシャドウ（ぼかしあり）

Text Shadow

#TextShadow002 {
	color: #333333;
	font-size: 45px;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.7), -1px -1px 1px rgba(0,0,0,0.7);
	background-color: #666666;
	padding: 5px;
}

<div id="TextShadow002">Text Shadow</div>

グラデーション

Gradient

#GradientBox {
	color: #FFFFFF;
	font-size: 20px;
	text-align: center;
	border-top: 2px solid #660000;
	border-bottom: 2px solid #660000;
	background-color: #33CCFF;
	background-image: linear-gradient(-90deg,
			#CC0000 0%,
			#990000 100%);
	background-image: -webkit-gradient(linear, left top, left bottom,
			from(#CC0000),
			to(#990000));
	background-image: -moz-linear-gradient(-90deg,
			#CC0000 0%,
			#990000 100%);
	padding: 10px;
}

<div id="GradientBox">Gradient</div>

ボタンサンプル

ボタンリンク

.ButtonBlueBox a {
	display: block;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-shadow: 0px -1px 0px #333333;
	width: 400px;
	border: 1px solid #0f2557;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background-color: #12295d;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
	background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
	padding: 10px 5px;
	margin: 0px auto 0px auto;
}
.ButtonBlueBox a:hover {
	text-shadow: 0px 0px 3px #FFFFCC;
}
.ButtonBlueBox a:active {
	text-shadow: 0px -1px 0px #333333;
	background-color: #1e3b73;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #12295d),color-stop(.75, #1e3b73),color-stop(1, #245192));
	background: -moz-linear-gradient(#12295d, #1e3b73 75%, #245192);
	box-shadow: inset 0px 0px 2px 0px #000000;
	-webkit-box-shadow: inset 0px 0px 2px 0px #000000;
	-moz-box-shadow: inset 0px 0px 2px 0px #000000;
}

<div class="ButtonBlueBox">
<a href="#####" title="リンクタイトル">ボタンリンク</a>
</div>

ボタンサンプル

ボタンリンクボタンリンクボタンリンクボタンリンクボタンリンク

.ButtonPanel {
	text-align: center;
	padding: 20px 0px;
}
.ButtonPanel a {
	color: #333333;
	font-size: 14px;
	text-decoration: none;
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #AAAAAA;
	border-bottom: 1px solid #AAAAAA;
	border-left: 1px solid #999999;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background-color: #FFFFFF;
	background-image: linear-gradient(-90deg, #FFFFFF 0%, #EEEEEE 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EEEEEE));
	background-image: -moz-linear-gradient(top, #FFFFFF, #EEEEEE);
	padding: 5px 10px;
}
.ButtonPanel a:hover {
	background: #FFFFFF;
}
.ButtonPanel a:active {
	background-color: #EEEEEE;
	background-image: linear-gradient(-90deg, #EEEEEE 0%, #EEEEEE 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#EEEEEE));
	background-image: -moz-linear-gradient(top, #EEEEEE, #EEEEEE);
}

<div class="ButtonPanel">
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
</div>

ボタンサンプル

ボタンリンクボタンリンクボタンリンクボタンリンクボタンリンク

.ButtonOval {
	text-align: center;
	background-color: #000000;
	padding: 20px 0px;
}
.ButtonOval a {
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.5);
	border: 2px solid #EEEEEE;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #CC0000;
	background-image: linear-gradient(-90deg,
			#CC0000 0%,
			#AA0000 47%,
			#990000 53%,
			#990000 100%);
	background-image: -webkit-gradient(linear, left top, left bottom,
			from(#CC0000),
			color-stop(47%, #AA0000),
			color-stop(53%, #990000),
			to(#990000));
	background-image: -moz-linear-gradient(top,
			#CC0000,
			#AA0000 47%,
			#990000 53%,
			#990000);
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5),
		inset 0 14px 0 rgba(255,255,255,0.1);
	-webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5),
		inset 0 14px 0 rgba(255,255,255,0.1);
	-moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5),
		inset 0 14px 0 rgba(255,255,255,0.1);
	padding: 5px 10px;
}
.ButtonOval a:hover {
	text-shadow: 0px 0px 3px #FFFFCC;
}
.ButtonOval a:active {
	background-image: linear-gradient(-90deg,
			#990000 0%,
			#990000 47%,
			#AA0000 53%,
			#CC0000 100%);
	background-image: -webkit-gradient(linear, left top, left bottom,
			from(#990000),
			color-stop(47%, #990000),
			color-stop(53%, #AA0000),
			to(#CC0000));
	background-image: -moz-linear-gradient(top,
			#990000,
			#990000 47%,
			#AA0000 53%,
			#CC0000);
}

<div class="ButtonOval">
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
</div>

ボタンサンプル

ボタンリンクボタンリンクボタンリンクボタンリンクボタンリンク

.ButtonBlack001 {
	text-align: center;
	background-color: #000000;
	padding: 20px 0px;
}
.ButtonBlack001 a {
	color: #FFFFFF;
	font-size: 14px;
	text-decoration: none;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.5);
	border-top: 1px solid #999999;
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-left: 1px solid #666666;
	border-radius: 14px;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	background-color: #333333;
	background-image: linear-gradient(-90deg,
			#333333 0%,
			#000000 100%);
	background-image: -webkit-gradient(linear, left top, left bottom,
			from(#333333),
			to(#000000));
	background-image: -moz-linear-gradient(top,
			#333333,
			#000000);
	padding: 3px 10px;
}
.ButtonBlack001 a:hover {
	background-color: #444444;
	background-image: linear-gradient(-90deg,
			#444444 0%,
			#222222 100%);
	background-image: -webkit-gradient(linear, left top, left bottom,
			from(#444444),
			to(#222222));
	background-image: -moz-linear-gradient(top,
			#444444,
			#222222);
}
.ButtonBlack001 a:active {
	background-color: #666666;
	background-image: linear-gradient(-90deg,
			#666666 0%,
			#333333 100%);
	background-image: -webkit-gradient(linear, left top, left bottom,
			from(#666666),
			to(#333333));
	background-image: -moz-linear-gradient(top,
			#666666,
			#333333);
}

<div class="ButtonBlack001">
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
	<a href="#####" title="リンクタイトル">ボタンリンク</a>
</div>

ボタンナビゲーションサンプル

TEST
TEST
TEST
TEST
TEST

.ButtonNavi001 ul {
	list-style: none;
	padding: 1px;
	margin: 0px 0px 10px 0px;
	overflow: hidden;
}
.ButtonNavi001 li {
	float: left;
	margin-right: 3px;
}
.ButtonNavi001 li a {
	display: block;
	color: #000000;
	width: 100px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.9);
	border: 1px solid #111111;
	background-color: #333333;
	background-image: linear-gradient(-90deg,
			#666666 0%,
			#333333 100%);
	background-image: -webkit-gradient(linear, left top, left bottom,
			from(#666666),
			to(#333333));
	background-image: -moz-linear-gradient(-90deg,
			#666666 0%,
			#333333 100%);
	box-shadow: 0px 1px 1px rgba(0,0,0,0.5),
		inset 0 15px 0 rgba(255,255,255,0.1),
		inset 0 0 0 1px rgba(255,255,255,0.2);
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.5),
		inset 0 15px 0 rgba(255,255,255,0.1),
		inset 0 0 0 1px rgba(255,255,255,0.2);
	-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.5),
		inset 0 15px 0 rgba(255,255,255,0.1),
		inset 0 0 0 1px rgba(255,255,255,0.2);
	transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-webkit-transition: all 0.3s ease-out 0s;
	padding: 5px 10px;
}
.ButtonNavi001 li a:hover {
	box-shadow: 0px 1px 1px rgba(0,0,0,0.5),
		inset 0 15px 0 rgba(255,255,255,0.3),
		inset 0 0 0 1px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.5),
		inset 0 15px 0 rgba(255,255,255,0.3),
		inset 0 0 0 1px rgba(255,255,255,0.5);
	-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.5),
		inset 0 15px 0 rgba(255,255,255,0.3),
		inset 0 0 0 1px rgba(255,255,255,0.5);
}
.ButtonNavi001 li a:active {
	box-shadow: 0px 0px 0px rgba(0,0,0,0),
		inset 0 15px 0 rgba(255,255,255,0.3),
		inset 0 0 0 1px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0),
		inset 0 15px 0 rgba(255,255,255,0.3),
		inset 0 0 0 1px rgba(255,255,255,0.5);
	-moz-box-shadow: 0px 0px 0px rgba(0,0,0,0),
		inset 0 15px 0 rgba(255,255,255,0.3),
		inset 0 0 0 1px rgba(255,255,255,0.5);
}

<div class="ButtonNavi001">
	<ul class="clearfix">
		<li><a href="#####">TEST</a></li>
		<li><a href="#####">TEST</a></li>
		<li><a href="#####">TEST</a></li>
		<li><a href="#####">TEST</a></li>
		<li><a href="#####">TEST</a></li>
	</ul>
</div>

ボタンサンプル

CLICK ME!

.ButtonClickBox {
	color: #FFFFFF;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	background-color: #0066FF;
	box-shadow: 0 5px 2px #333333, 0 7px 10px #CCCCCC;
	-webkit-box-shadow: 0 5px 2px #333333, 0 7px 10px #CCCCCC;
	-moz-box-shadow: 0 5px 2px #333333, 0 7px 10px #CCCCCC;
	padding: 10px 20px;
	position:relative;
	top: 30px;
	left: 10px;
}
.ButtonClickBox:hover {
	cursor: pointer;
	color: #FFFFFF;
	background-color: #33CCFF;
}
.ButtonClickBox:active {
	top: 33px;
	box-shadow: 0 2px 2px #333333, 0 4px 10px #CCCCCC;
	-webkit-box-shadow: 0 2px 2px #333333, 0 4px 10px #CCCCCC;
	-moz-box-shadow: 0 2px 2px #333333, 0 4px 10px #CCCCCC;
}

<div style="height:100px;"><a class="ButtonClickBox">CLICK ME!</a></div>

CSS3 コピペサンプル

テキストシャドウ

テキストシャドウ（ぼかしあり）

グラデーション

ボタンサンプル

ボタンサンプル

ボタンサンプル

ボタンサンプル

ボタンナビゲーションサンプル

ボタンサンプル