今天做一些用css3实现的the Sexy Buttons
源代码下载地址：http://download.csdn.net/my/uploads/1
html代码如下：
<h1>Sexy CSS Buttons</h1>
<a class="fancy_button" href="#"><b>Normal</b></a>
<a class="fancy_button hover" href="#"><b>Hover</b></a>
<a class="fancy_button active" href="#"><b>Active</b></a>
css代码如下：
body, html {
padding: 0;
margin: 0;
}
body {
font: 16px/1.5 sans-serif;
background: #333;
text-align: center;
}
h1 {
font-size: 1.5em;
text-align: center;
color: #aaa;
}
div {
display: block;
width: 100%;
background: #000;
padding: 0.5em 0;
color: #fff;
font-size: 0.8em;
}
div a {
color: #f22;
text-decoration: none;
}
div a:hover {
border-bottom: 1px dotted;
}
.fancy_button {
background: #01b12e;
color: white;
margin: 0 1em 0 0;
font: 21px/1em Arial;
text-decoration: none;
}
.fancy_button {
display:inline-block;
position:relative;
padding:0.25em 2em;
border:1px solid;
border-color:transparent transparent rgba(202,202,202,0.27) transparent;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-background-clip:padding-box;
}
.fancy_button b {
display:block;
z-index:2;
position:relative;
text-shadow:rgba(0,0,0,0.45) 0 -1px 0;
}
.fancy_button:before, .fancy_button:after {
position:absolute;
width:100%;
height:100%;
content:"";
display:block;
-webkit-background-clip:padding-box;
}
.fancy_button:before {
top:-4px;
left:-4px;
padding:4px;
background:#086f14;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(77,77,77,0.4)));
background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(77,77,77,0.4));
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.fancy_button:after {
top:0;
left:0;
border:1px solid;
border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.3) rgba(0,0,0,0.6) rgba(0,0,0,0.3);
box-shadow: rgba(0,0,0,0.75) 0px 0px 3px;
border-radius: 7px;
background:transparent -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.6)), color-stop(0.5, rgba(255,255,255,0.15)),
color-stop(0.5, rgba(255,255,255,0.01)), to(transparent));
background:transparent -moz-linear-gradient(top, rgba(255,255,255,0.6),
rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.01) 50%, transparent);
}
.fancy_button:hover:after, .fancy_button.hover:after {
border-top-color:rgba(255,255,255,0.65);
background:-webkit-gradient(linear, left top, left bottom, from(rgba(220,220,220,0.6)),
color-stop(0.5, rgba(100,100,100,0.2)), color-stop(0.5, rgba(0,0,0,0.21)), to(rgba(0,0,0,0.20)));
background:-moz-linear-gradient(top, rgba(220,220,220,0.6), rgba(100,100,100,0.2) 50%,
rgba(0,0,0,0.21) 50%, rgba(0,0,0,0.20));
}
.fancy_button:active:after, .fancy_button.active:after {
border-top-color:rgba(255,255,255,0.2);
border-left-color:rgba(0,0,0,0.4);
background:-webkit-gradient(linear, left top, left bottom, from(rgba(150,150,150,0.6)),
color-stop(0.5, rgba(60,60,60,0.6)), color-stop(0.5, rgba(40,40,40,0.6)), to(rgba(0,0,0,0.2)));
background:-moz-linear-gradient(top, rgba(150,150,150,0.6), rgba(60,60,60,0.6) 50%, rgba(40,40,40,0.6) 50%,
rgba(20,20,20,0.5));
box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px;
}
预览效果如下图：
