リンクをボタン風にするCSS(丸み・影付き・グラデューション)サンプル

<a href~="http://webdou.com/" title="TOP" />TOP</a>
<a href~="http://webdou.com/html/" title="HTML" />HTML</a>
<a href~="http://webdou.com/css/" title="CSS" />CSS</a>

a.button {
	background-color:#ddeeff;
	border:1px solid #ccc;
	padding:5px;
	cursor:pointer;
}

<a href~="http://webdou.com/" title="TOP" class="button" />TOP</a>
<a href~="http://webdou.com/html/" title="HTML" class="button" />HTML</a>
<a href~="http://webdou.com/css/" title="CSS" class="button" />CSS</a>

a.button2 {
	background-color:#ddeeff;
	border:1px solid #ccc;
	padding:5px;
	cursor:pointer;
}
a.button2:hover {
	color:white;
	background-color:#999;
}

<a href~="http://webdou.com/" title="TOP" class="button2" />TOP</a>
<a href~="http://webdou.com/html/" title="HTML" class="button2" />HTML</a>
<a href~="http://webdou.com/css/" title="CSS" class="button2" />CSS</a>

a.button4 {
	background-color:#ddeeff;
	border:1px solid #8888ff;
	padding:1px 8px;
	border-radius:5px;
	box-shadow:0px 0px 10px #c3e1ff;
	cursor:pointer;
}
a.button4:hover {
	color:white;
	background-color:navy;
	text-shadow:0px 0px 3px #ffffff;
}

<a href~="http://webdou.com/" title="TOP" class="button4" />TOP</a>
<a href~="http://webdou.com/html/" title="HTML" class="button4" />HTML</a>
<a href~="http://webdou.com/css/" title="CSS" class="button4" />CSS</a>

a.button3 {
	background-color:#000;
	border:1px solid #666;
	color:white;
	padding:3px 5px;
	cursor:pointer;
	border-radius:5px;
}
a.button3:hover {
	color:white;
	text-shadow:0px 0px 3px #fff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666), color-stop(1.00, #111));
	background: -webkit-linear-gradient(#666, #111);
	background: -moz-linear-gradient(#666, #111);
	background: -o-linear-gradient(#666, #111);
	background: -ms-linear-gradient(#666, #111);
	background: linear-gradient(#666, #111);
}
.grad2 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #afbdc0), color-stop(0.50, #6d7673), color-stop(0.50, #0a0f0b), color-stop(1.00, #0a0809));
	background: -webkit-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -moz-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -o-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: -ms-linear-gradient(top, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
	background: linear-gradient(to bottom, #afbdc0 0%, #6d7673 50%, #0a0f0b 50%, #0a0809 100%);
}

<a href~="http://webdou.com/" title="TOP" class="button3 grad2" />TOP</a>
<a href~="http://webdou.com/html/" title="HTML" class="button3 grad2" />HTML</a>
<a href~="http://webdou.com/css/" title="CSS" class="button3 grad2" />CSS</a>