ホームページを作成に関する備忘録

css3で、いろいろなボタンを作ってみる(IEだとほとんど変化ないかもしれません)。

cssコード

p.btn0 {
margin: 10px;
}
/*1.borderとbackgroundのみ変更したもの*/
a.btn01 {
	text-decoration: none;
	padding: 5px 10px 5px 10px;
	border: 1px solid #777777;
	font-size: 120%;
	font-weight: 800;
	color: #444444;
	background: #aaaaaa;
}
a.btn01:hover {
	background: #888888;
}

/*2.border-radiusを追加したもの*/
a.btn02 {
	text-decoration: none;
	padding: 5px 10px 5px 10px;
	border: 1px solid #777777;
	border-radius: 5px;
	font-size: 120%;
	font-weight: 800;
	color: #444444;
	background: #aaaaaa;
}
a.btn02:hover {
	background: #888888;
}

/*3.さらにボタンに陰を追加したもの*/
a.btn03 {
	text-decoration: none;
	padding: 5px 10px 5px 10px;
	border: 1px solid #777777;
	border-radius: 5px;
	-webkit-box-shadow: 3px 3px 5px #222222;
	box-shadow: 3px 3px 5px #222222;
	font-size: 120%;
	font-weight: 800;
	color: #444444;
	background: #aaaaaa;
}
a.btn03:hover {
	background: #888888;
}

/*4.背景にグラデーションをかけてみました*/

a.btn04 {
	text-decoration: none;
	padding: 5px 10px 5px 10px;
	border: 1px solid #777777;
	border-radius: 5px;
	-webkit-box-shadow: 3px 3px 5px #222222;
	box-shadow: 3px 3px 5px #222222;
	font-size: 120%;
	font-weight: 800;
	color: #444444;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.68, #ffd1d1), color-stop(0.00, #ff1a00));
	background: -webkit-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%);
	background: -moz-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%);
	background: -o-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%);
	background: -ms-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%);
	background: linear-gradient(top, #ff1a00 0%, #ffd1d1 68%);

}

a.btn04:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.55, #dbffbd), color-stop(0.04, #285c2f));
	background: -webkit-linear-gradient(top, #285c2f 4%, #dbffbd 55%);
	background: -moz-linear-gradient(top, #285c2f 4%, #dbffbd 55%);
	background: -o-linear-gradient(top, #285c2f 4%, #dbffbd 55%);
	background: -ms-linear-gradient(top, #285c2f 4%, #dbffbd 55%);
	background: linear-gradient(top, #285c2f 4%, #dbffbd 55%);
}

/*5.テキストに陰をつけてみました*/
a.btn05 {
	text-decoration: none;
	padding: 5px 10px 5px 10px;
	border: 1px solid #777777;
	border-radius: 5px;
	-webkit-box-shadow: 3px 3px 5px #222222;
	box-shadow: 3px 3px 5px #222222;
	font-size: 120%;
	font-weight: 800;
	color: #999999;
	text-shadow: 2px 2px 2px #444444;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.68, #ffd1d1), color-stop(0.00, #ff1a00));
	background: -webkit-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%);
	background: -moz-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%);
	background: -o-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%);
	background: -ms-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%);
	background: linear-gradient(top, #ff1a00 0%, #ffd1d1 68%);
}

a.btn05:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.55, #dbffbd), color-stop(0.04, #285c2f));
	background: -webkit-linear-gradient(top, #285c2f 4%, #dbffbd 55%);
	background: -moz-linear-gradient(top, #285c2f 4%, #dbffbd 55%);
	background: -o-linear-gradient(top, #285c2f 4%, #dbffbd 55%);
	background: -ms-linear-gradient(top, #285c2f 4%, #dbffbd 55%);
	background: linear-gradient(top, #285c2f 4%, #dbffbd 55%);
	color: #222222;
	text-shadow: 2px 2px 2px #444444;
}

1.borderとbackgroundのみ変更したもの

リンクはしていませんが

上のボタンにマウスを持っていくと、背景の色が変化します。

2.border-radiusを追加したもの

リンクはしていませんが

5pxの丸みを付けてみました。上のボタンにマウスを持っていくと、背景の色が変化します。IEは9から対応するようです。

3.さらにボタンに陰を追加したもの

リンクはしていませんが

陰を付けてみました。上のボタンにマウスを持っていくと、背景の色が変化します。IEは9から対応するようです。

4.背景にグラデーションをかけてみました

リンクはしていませんが

陰を付けてみました。上のボタンにマウスを持っていくと、背景の色が変化します。なお、CSS3のグラデーションのコードを簡単に作成してくれるサイトがあります。Easy Gradation Editor "Grad2" という所です。なお、グラデーションはIEはまだ対応していないようです。IE10から対応するようです。

5.テキストに陰をつけてみました

リンクはしていませんが

陰を付けてみました。上のボタンにマウスを持っていくと、背景とテキストの色が変化します。これもIEはまだ対応していないようです。