web屋の備忘録

ホームページ制作、webマーケティング、技術資料など

*

css3で作る、立体ボタン

      2016/01/12

リンクテキスト

/**---------------------------------------------------------------
立体ボタン(青)
---------------------------------------------------------------**/
.btn_blue {
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	font-size: 13px;
	display: block;
}
.btn_blue {
	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;
}

 - HTML・CSS