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

css3で作るスマートフォンサイト用、業種別ボタンデザイン配布!


5つの効果で作る、よく使うCSS3ボタンデザインサンプル集でご紹介した方法を使って、実際に様々な業種向けにデザインを作ってみました。
デザインの参考に、是非ご活用ください!
iPhone,Androidのデフォルトのブラウザを対象としております。

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

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

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

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

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

医療系、学校系など、清潔感を演出したいサイトに!

.btn {
	background: -moz-linear-gradient(top,#8BD1E3 0%,#99B3FF 50%,#526FC4 50%,#3385FF);
	background: -webkit-gradient(linear, left top, left bottom, from(#8BD1E3),color-stop(0.50, #99B3FF),color-stop(0.50, #526FC4),to(#3385FF));
	color: #FFF;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border: 2px solid #4D5FD6;
	-moz-box-shadow: 0px 1px 4px rgba(000,000,000,0.8),inset 0px 0px 13px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0px 1px 4px rgba(000,000,000,0.8),inset 0px 0px 13px rgba(255,255,255,0.5);
	text-shadow: 0px -1px 5px rgba(000,000,000,0.3),0px 1px 0px rgba(255,255,255,1);
}
.btn {
	background: -moz-linear-gradient(top,#BADDFF 0%,#0C81F5);
	background: -webkit-gradient(linear, left top, left bottom, from(#BADDFF),to(#0C81F5));
	color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #528BC4;
	-moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.6);
	-webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.6);
	text-shadow: 0px -1px 0px rgba(000,000,000,0.2),0px 1px 0px rgba(255,255,255,0.3);
}

ブライダル系、美容・エステ系など、女性らしさを演出したいサイトに!

.btn {
	background: -moz-linear-gradient(top,#F52952 0%,#FFBAD1);
	background: -webkit-gradient(linear, left top, left bottom, from(#F52952),to(#FFBAD1));
	color: #FFF;
	border-radius: 3px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border: 2px solid #FF69A0;
	-moz-box-shadow: 0px 0px 5px rgba(102,51,0,0.5),inset 0px 0px 8px rgba(255,240,196,1);
	-webkit-box-shadow: 0px 0px 5px rgba(102,51,0,0.5),inset 0px 0px 8px rgba(255,240,196,1);
	text-shadow: 1px 1px 3px rgba(153,17,89,1),2px 1px 0px rgba(152,230,34,0);
}
.btn {
	background: -moz-linear-gradient(top,#F7D756 0%,#996600);
	background: -webkit-gradient(linear, left top, left bottom, from(#F7D756),to(#996600));
	color: #FFF;
	border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border: 0px solid #856400;
	-moz-box-shadow: 0px 1px 2px rgba(000,000,000,0),inset 0px -3px 0px rgba(214,169,54,1);
	-webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0),inset 0px -3px 0px rgba(214,169,54,1);
	text-shadow: 0px -1px 0px rgba(102,51,0,1),0px 1px 0px rgba(0,0,0,0);
}

企業サイト、士業系などかっちり感のあるサイトに!

.btn {
	background: -moz-linear-gradient(top,#99CC00 0%,#339900);
	background: -webkit-gradient(linear, left top, left bottom, from(#99CC00),to(#339900));
	color:#FFF;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border: 1px solid #01661C;
	-moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.2),inset 0px -1px 0px rgba(74,201,0,1);
	-webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.2),inset 0px -1px 0px rgba(74,201,0,1);
	text-shadow: 0px -1px 0px rgba(000,000,000,0),0px 1px 0px rgba(0,0,0,0.5);
}
.btn {
	background: -moz-linear-gradient(top,#FFCC00 0%,#FF6600 50%,#FF8533);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFCC00),color-stop(0.50, #FF6600),to(#FF8533));
	color: #FFF;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border: 2px solid #FF6600;
	-moz-box-shadow: 0px 2px 4px rgba(000,000,000,0.5),inset 0px 0px 0px rgba(255,255,255,0);
	-webkit-box-shadow: 0px 2px 4px rgba(000,000,000,0.5),inset 0px 0px 0px rgba(255,255,255,0);
	text-shadow: 2px 2px 5px rgba(102,051,000,1),0px 1px 0px rgba(255,255,255,0);
}

車・工業製品系の男性的な雰囲気を演出したいサイトに!

.btn {
	background: -moz-linear-gradient(top,#A3A3A3 0%,#3B3B3B 50%,#242424 50%,#000);
	background: -webkit-gradient(linear, left top, left bottom, from(#A3A3A3),color-stop(0.50, #3B3B3B),color-stop(0.50, #242424),to(#000));
	color: #DDD;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: 1px solid #000;
	-moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.6);
	-webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.6);
	text-shadow: 0px -1px 0px rgba(000,000,000,1),0px 1px 0px rgba(255,255,255,0.2);
}
.btn {
	background: -moz-linear-gradient(top,#F7FF00 0%,#FFBF00);
	background: -webkit-gradient(linear, left top, left bottom, from(#F7FF00),to(#FFBF00));
	color: #000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 3px solid #000;
	-moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.7);
	text-shadow: 0px -1px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3);
}

カラーコードを変更するだけで、お好みのデザインに変更できます。
是非お試し下さい!


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