Pocket
LINEで送る

スクリーンショット 2013-05-23 16.23.35

/************* ボタン ***************/
.btn {
	background: -moz-linear-gradient(top,#DFE9F5, #1D25F7 50%,#0020A3 50%,#0039FE);
	background: -webkit-gradient(linear, left top, left bottom, from(#DFE9F5), color-stop(0.5,#1D25F7), color-stop(0.5,#0020A3), to(#0039FE));
	color: #FFF;
	font-size:16px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border: 1px solid #0033FF;
	-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: 40%;
	padding: 5px 0;
}
.btn:hover{
	background: -moz-linear-gradient(top,#EFF9F5, #2D35F7 50%,#1030B3 50%,#1049FE);
	background: -webkit-gradient(linear, left top, left bottom, from(#EFF9F5), color-stop(0.5,#2D35F7), color-stop(0.5,#1030B3), to(#1049FE));
	color: #FFF;
	font-size:16px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border: 1px solid #1144FF;
	-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: 40%;
	padding: 5px 0;
}
.btn:active {
	position:relative;
	top:1px;
}

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

Pocket
LINEで送る

カテゴリー: プログラミング

コメントください

関連記事

プログラミング

cakePHP2 – 多言語化

多言語化します。 cakephpマニュアルのこのページに説明が書いてあ 続きを読む …

プログラミング

Go言語によるビットコインのフルノード実装btcdを調べる(2)

btcdを実行した際のプログラムの流れを最初から確認してみます。 se 続きを読む …

%d人のブロガーが「いいね」をつけました。