详细内容

CSS3实现vista风格的按钮
兼容性：IE6+ FireFox2+ Opera9+ 更新时间：2010-1-28

简介：实用纯CSS3实现的vista和Aqua风格的按钮，要展示效果需要浏览器支持CSS3，无需任何图片和脚本

Aqua风格按钮

Black Aqua Red Aqua Blue Aqua Green Aqua

Vista风格按钮

Black Vista Red Vista Blue Vista Green Vista

查看全部代码：查看

代码使用方法：

在网页<head>区添加以下代码


<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>

在网页<body>区添加以下代码

下载：从本地下载

出处：[URL]http://www.cssplay.co.uk[/URL] 作者：http://www.cssplay.co.uk

上一篇：CSS3实现的相册，点小图可看大图下一篇：CSS3实现的平滑显示的图片信息