首页 > JavaScript代码 > 样式控制.样式效果 CSS > 详细内容

CSS3实现vista风格的按钮
兼容性：IE6+ FireFox2+ Opera9+   更新时间：2010-01-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>区添加以下代码

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


下载：     从本地下载

出处：http://www.cssplay.co.uk

分享到： 更多

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