スマートフォン最適化ノウハウコラム

5つの効果で作る、よく使うCSS3ボタンデザインサンプル集


CSS3によって、グラデーションや角丸などの様々なデザイン表現を、画像で書き出すことなく表現出来るようになりました。

ここではボタンデザインの際に役立つ5つの効果をご紹介します!

当記事のサンプルについて

すべてのサンプルは下記のHTMLを使用しております。

<a class="btn" href="#">LinkText</a>

また、全てのサンプルに共通で下記のスタイルを適用しております。

.btn {
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	font-size: 13px;
	display: block;
}

1.線

ボタンを枠で囲むことができます。
太さ、線種、色を上下左右で個別に指定できるので、線だけで立体感を出すことができます。
※1.線に関してはcss2で表現可能です。

.btn {
	background: #EEE;
	border: 1px solid #DDD;
	color: #111;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	border: 3px solid #DDD;
	color: #111;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	border-top: 1px solid #DDD;
	border-left: 1px solid #DDD;
	border-right: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
	color:#111;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	border-top: 3px solid #DDD;
	border-left: 3px solid #DDD;
	border-right: 3px solid #BBB;
	border-bottom: 3px solid #BBB;
	color:#111;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	border-top: 5px solid #C00;
	border-left: 5px solid #09C;
	border-right: 5px solid #9C0;
	border-bottom: 5px solid #FC0;
	color:#111;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	border: 1px dotted #CCC;
	color: #111;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	border: 2px dotted #CCC;
	color: #111;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	border-top: 3px dotted #DDD;
	border-left: 3px solid #DDD;
	border-right: 3px solid #DDD;
	border-bottom: 3px dotted #DDD;
	color:#111;
	width: 100px;
	padding: 10px 0;
}

2.背景色

背景の色を、単色・線形グラデーションで指定することができます。
上から下、下から上、左から右、右から左だけでなく、斜めのグラデーションも可能です。
また、色ごとに不透明度も指定できるので、背景を透過させることもできます。
色を複数指定、開始位置の指定もできるため、立体感や光沢を綺麗に表現することができます。

.btn {
	background: -moz-linear-gradient(top,#FFF 0%,#EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
	border: 1px solid #DDD;
	color:#111;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: -moz-linear-gradient(top,#0099CC 0%,#006699);
	background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
	border: 1px solid #DDD;
	color:#FFF;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069);
	background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069),  to(#069));
	border: 1px solid #DDD;
	color: #FFF;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: -moz-linear-gradient(top,#80CCE6,#80CCE6 5%,#09C 5%,#069 95%,#069 95%,#00293D);
	background: -webkit-gradient(linear, left top, left bottom, from(#80CCE6), color-stop(0.05,#80CCE6), color-stop(0.05,#09C), color-stop(0.95,#069), color-stop(0.95,#00293D), to(#00293D));
	border: 1px solid #DDD;
	color: #FFF;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C);
	background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C));
	border: 1px solid #DDD;
	color: #FFF;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: -moz-linear-gradient(top,#BFE5F2, #63B3D2 50%,#0081B4 50%,#00679A);
	background: -webkit-gradient(linear, left top, left bottom, from(#BFE5F2), color-stop(0.5,#63B3D2), color-stop(0.5,#0081B4), to(#00679A));
	border: 1px solid #DDD;
	color: #FFF;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: -moz-linear-gradient(top,#20688A, #3F96B8 50%,#00679A 50%,#0081B4);
	background: -webkit-gradient(linear, left top, left bottom, from(#20688A), color-stop(0.5,#3F96B8), color-stop(0.5,#00679A), to(#0081B4));
	border: 1px solid #DDD;
	color: #FFF;
	width: 100px;
	padding: 10px 0;
}

3.角丸

線や背景の四隅を丸くすることができます。
横幅や高さの指定と組み合わせることで、完全な円や、左右だけ、上下だけ丸くすることも可能です。

.btn {
	background: #EEE;
	border: 1px solid #DDD;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	color: #111;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	border: 1px solid #DDD;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color: #111;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	border: 1px solid #DDD;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	color: #111;
	width: 100px;
	padding: 10px 0;
}
.btn {
	width: 60px;
	height: 38px;
	background: #EEE;
	border: 1px solid #DDD;
	border-radius: 70px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	color: #111;
	padding: 42px 20px 20px;
}
.btn {
	background: #EEE;
	border: 1px solid #DDD;
	border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	color: #111;
	width: 100px;
	padding: 10px 0;
}

4.文字の影

文字に影をつけることができます。
上下左右の位置と影のぼかしの度合い、色、不透明度の指定が可能です。
また、複数指定もできます。

.btn {
	background: #09C;
	border: 1px solid #DDD;
	color: #FFF;
	text-shadow: 0px 0px 3px rgba(0,0,0,1);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #0099CC;
	border: 1px solid #DDD;
	color: #FFF;
	text-shadow:1px 1px 1px rgba(0,0,0,0.5);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #09C;
	border: 1px solid #DDD;
	color: #FFF;
	text-shadow:1px 1px 3px rgba(0,0,0,0.5);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #09C;
	border: 1px solid #DDD;
	color: #FFF;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.5);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #09C;
	border: 1px solid #DDD;
	color: #FFF;
	text-shadow: 5px 5px 3px rgba(0,0,0,0.5);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #09C;
	border: 1px solid #DDD;
	color: #FFF;
	text-shadow: -1px -1px 1px rgba(255,255,255,0.5),1px 1px 1px rgba(0,0,0,0.5);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #09C;
	border: 1px solid #DDD;
	color: #FFF;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5),-1px -1px 1px rgba(0,0,0,0.5);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #09C;
	border: 1px solid #DDD;
	color: #FFF;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.85),0px 0px 5px rgba(0,0,0,1);
	width: 100px;
	padding: 10px 0;
}

5.背景の影

背景に影をつけることができます。
上下左右の位置と影のぼかしの度合い、色、不透明度の指定が可能です。
また、複数指定もできます。
上部に黒い影、下部に白い影を付けることで、くぼんだような、より立体的な表現ができます。内側にも影を指定できるため、二重線も表現できます。

.btn {
	background: #EEE;
	color: #111;
	border: 1px solid #FFF;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	color: #111;
	border: 1px solid #FFF;
	-moz-box-shadow: 0px 0px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 0px 0px 1px rgba(000,000,000,0.3);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	color: #111;
	border: 1px solid #FFF;
	-moz-box-shadow: 0px 0px 2px rgba(000,000,000,0.3);
	-webkit-box-shadow: 0px 0px 2px rgba(000,000,000,0.3);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	color: #111;
	border: 1px solid #EEE;
	-moz-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
	-webkit-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	color: #111;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	-moz-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
	-webkit-box-shadow: -1px -1px 1px rgba(000,000,000,0.3),1px 1px 1px rgba(255,255,255,1);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	color: #111;
	-moz-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 1px 1px 5px rgba(000,153,204,1),inset -1px -1px 5px rgba(205,0,0,1);
	-webkit-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 1px 1px 5px rgba(000,153,204,1),inset -1px -1px 5px rgba(205,0,0,1);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	color: #111;
	-moz-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(000,000,000,1);
	-webkit-box-shadow: 0px 0px 2px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(000,000,000,1);
	border: 1px solid #FFF;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	color: #111;
	-moz-box-shadow: inset 1px 1px 3px rgba(000,000,000,0.3);
	-webkit-box-shadow: inset 1px 1px 3px rgba(000,000,000,0.3);
	width: 100px;
	padding: 10px 0;
}

スタイルサンプル

上記の5つの効果を併用した、スタイルサンプルです。

.btn {
	background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6));
	border: 2px solid #DDD;
	color: #111;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: -moz-linear-gradient(top,#0099CC 0%,#006699);
	background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
	border: 2px solid #FFF;
	color: #FFF;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);
	background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));
	color: #FFF;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid #0099CC;
	-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
	-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
	text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6));
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	color: #111;
	-moz-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3);
	-webkit-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3);
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: #EEE;
	color: #111;
	-moz-box-shadow: inset -1px -1px 1px rgba(000,000,000,0.2),inset 2px 2px 1px rgba(255,255,255,1);
	-webkit-box-shadow: inset -1px -1px 1px rgba(000,000,000,0.2),inset 2px 2px 1px rgba(255,255,255,1);
	border-top: 1px solid #BBB;
	border-left: 1px solid #BBB;
	border-right: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: -moz-linear-gradient(top,#FFF 0%,#FFF 3%,#E6E6E6 3%,#FFF);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.03,#FFF), color-stop(0.03,#E6E6E6), to(#FFF));
	color: #111;
	border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	border: 1px solid #CCC;
	border-bottom: 3px solid #0099CC;
	width: 100px;
	padding: 10px 0;
}
.btn {
	background: -moz-linear-gradient(top,#B1D2E0 0%,#B1D2E0 3%,#0099CC 3%,#069);
	background: -webkit-gradient(linear, left top, left bottom, from(#B1D2E0), color-stop(0.03,#B1D2E0), color-stop(0.03,#0099CC), to(#069));
	color: #FFF;
	border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	border: 1px solid #09C;
	border-bottom: 3px solid #09C;
	width: 100px;
	padding: 10px 0;
}

いかがでしたでしょうか?
画像で作成するのと見た目は大差なく、データも軽量化できるCSS3ボタン、是非お試し下さい!


  • カテゴリ/スマートフォンサイトデザイン
  • ↑このページの上部へ