今天做一些用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));
    backgrou