cssコード

p.btn0 {
margin: 10px;
}
/*１．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;
}

/*２．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;
}

/*３．さらにボタンに陰を追加したもの*/
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;
}

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

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%);
}

/*５．テキストに陰をつけてみました*/
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;
}