实用纯CSS3实现的vista和Aqua风格的按钮，要展示效果需要浏览器支持CSS3，无需任何图片和脚本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3实现vista风格的按钮 - 分享JavaScript-sharejs.com</title>
<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" />
<meta name="description" content="CSS3实现vista风格的按钮,JavaScript分享网" />
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />
<style type="text/css">
.black1 {background:#000; margin-left:10px; display:inline; border:4px solid #000;}
.red1 {background:#c00; margin-left:10px; display:inline; border:4px solid #c00;}
.blue1 {background:#00a; margin-left:10px; display:inline; border:4px solid #00a;}
.green1 {background:#080; margin-left:10px; display:inline; border:4px solid #080;}
.aqua {display:block; line-height: 32px; color:#fff; font-family:arial, sans-serif; font-size:14px; font-weight:bold; float:left; text-decoration:none; padding:0 10px;
text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.4)), color-stop(50%, rgba(255, 255, 255, 0.2)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0));
}
.black2 {background:#000; margin-left:10px; display:inline; border:1px solid #000;}
.red2 {background:#c00; margin-left:10px; display:inline; border:1px solid #c00;}
.blue2 {background:#00a; margin-left:10px; display:inline; border:1px solid #00a;}
.green2 {background:#080; margin-left:10px; display:inline; border:1px solid #080;}
.vista {display:block; line-height: 36px; color:#fff; font-family:arial, sans-serif; font-size:14px; font-weight:bold; float:left; text-decoration:none; padding:0 13px 0 14px;
text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)), color-stop(48%, rgba(255, 255, 255, 0.5)), color-stop(50%, rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}
</style>
</head>
<body>
<h2>Aqua风格按钮</h2>
<a class="black1 aqua" href="#x">Black Aqua</a>
<a class="red1 aqua" href="#x">Red Aqua</a>
<a class="blue1 aqua" href="#x">Blue Aqua</a>
<a class="green1 aqua" href="#x">Green Aqua</a>
<br /><br /><br />
<h2>Vista风格按钮</h2>
<a class="black2 vista" href="#x">Black Vista</a>
<a class="red2 vista" href="#x">Red Vista</a>
<a class="blue2 vista" href="#x">Blue Vista</a>
<a class="green2 vista" href="#x">Green Vista</a>
<br /><br /><br />
<br><br>
<div align="center">
<script language="javascript" src="http://www.sharejs.com/js/720.js"></script>
<br><br>
获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
<br>
转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！
</div>
</body>
</html>
