3 State CSS3 Button

<html>
<head>
<title>3 State CSS3 Button</title>
<style type="text/css">
<!--
.button,#searchsubmit,#wp_page_numbers a{
	display:inline-block;
	position:relative;
	padding:7px 15px;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	border-radius:18px;
	font:15px/1.4 "myriad-pro-1","myriad-pro-2","Lucida Grande",Sans-Serif;
	background-color:#b6d3f4;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#b6d3f4), to(#5483b8));
	background-image:-webkit-linear-gradient(top, #b6d3f4, #5483b8);
	background-image:-moz-linear-gradient(top, #b6d3f4, #5483b8);
	background-image:-ms-linear-gradient(top, #b6d3f4, #5483b8);
	background-image:-o-linear-gradient(top, #b6d3f4, #5483b8);
	color:white !important;
	-webkit-box-shadow:inset 0 1px 1px #fff,0 3px 3px rgba(0,0,0,0.6);
	-moz-box-shadow:inset 0 1px 1px #fff,0 3px 3px rgba(0,0,0,0.6);
	box-shadow:inset 0 1px 1px #fff,0 3px 3px rgba(0,0,0,0.6);
	border:1px solid #9ac9ff !important;
	font-weight:600;
	text-shadow:0 -1px 0 rgba(0,0,0,0.3);
	text-decoration: none;
}

.ie8 .button,.ie8 #searchsubmit,.ie8 #wp_page_numbers a{
	background:#4b8db5;
}

.button:hover,#searchsubmit:hover,#wp_page_numbers a:hover{
	-webkit-box-shadow:inset 0 2px 6px #fff,0 3px 3px rgba(0,0,0,0.6);
	-moz-box-shadow:inset 0 2px 6px #fff,0 3px 3px rgba(0,0,0,0.6);
	box-shadow:inset 0 2px 6px #fff,0 3px 3px rgba(0,0,0,0.6)
}

.button:active,#searchsubmit:active,#wp_page_numbers a:active{
	-webkit-box-shadow:inset 0 2px 6px #fff,0 1px 1px rgba(0,0,0,0.6);
	-moz-box-shadow:inset 0 2px 6px #fff,0 1px 1px rgba(0,0,0,0.6);
	box-shadow:inset 0 2px 6px #fff,0 1px 1px rgba(0,0,0,0.6);
	top:2px}#searchsubmit{padding:3px 15px}.explanation{background-color:#fefcaf;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#fefcaf), to(#fffeda));
	background-image:-webkit-linear-gradient(top, #fefcaf, #fffeda);
	background-image:-moz-linear-gradient(top, #fefcaf, #fffeda);
	background-image:-ms-linear-gradient(top, #fefcaf, #fffeda);
	background-image:-o-linear-gradient(top, #fefcaf, #fffeda);
	padding:15px;
	margin:0 0 20px 0;
	-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.25);
	-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.25);
	box-shadow:1px 1px 3px rgba(0,0,0,0.25)
}

-->
</style>
</head>
<body>
<p><a class="button" href="">Download</a></p>
</body>
</html>