CSS buttons using box-reflect

Inspired by http://forr.st/~zUE

by JordanBlount

HTML

<p>Please view in Chrome to<br>experience the box-reflect!</p>

<a href="#" class="blue"></a>
<a href="#" class="green"></a>
<a href="#" class="red"></a>
<a href="#" class="yellow"></a>

CSS

body {
    background: #333 url(http://i1208.photobucket.com/albums/cc369/sl1dr/dark-noise.jpg) 0 0 repeat;
}
p {
    color: #eee;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 26px;
    height: 50px;
    line-height: 30px;
    margin-bottom: 26px;
    text-align: center;
    text-shadow: 0 1px 5px hsla(0,0%,0%,.75);
    width: 500px;
}
a {
    background: #aaa;
    border: 1px solid #666;
    border: 1px solid hsla(0,0%,0%,.4);
    display: block;
    height: 50px;
    margin-bottom: 50px;
    position: relative;
    width: 500px;
    -webkit-border-radius: 10px;
    -webkit-box-reflect: below 3px 
                         -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,
                         rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%);
    -webkit-box-shadow: inset 0 1px hsla(0,0%,100%,.25), 
                        inset 0 50px 0 -25px hsla(0,0%,100%,.10), 
                        inset 0 0 25px hsla(0,0%,100%,.5);
    -webkit-transition: all .2s ease;
}
a:hover,
a:focus {
    -webkit-box-shadow: inset 0 1px hsla(0,0%,100%,.25), 
                        inset 0 50px 0 -25px hsla(0,0%,100%,.10), 
                        inset 0 0 100px hsla(0,0%,100%,.5);
}
a:active {
    top: 1px;
    -webkit-box-reflect: below 1px 
                         -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,
                         rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%);
    -webkit-transition: all 0 ease;
}
.blue {
    background: #2b6fdb;
}
.green {
    background: #39bc25;
}
.red {
    background: #db2b2b;
}
.yellow {
    background: #f2ae30;
}