Awesome 4 State Apple Quality CSS3 Button

by kizer

HTML

<!DOCTYPE html>

<!--
    Cross browser CSS button-like links
    The .hover and .active classes are for demonstration purposes 
    http://intemperie.me/
-->
<html lang="en">
<meta charset="utf-8" />
<head>
</head>
<body>
<ul>
    <li><a href="#">Action</a></li>
    <li><a href="#" class="hover">Action</a></li>
    <li><a href="#" class="active">Action</a></li>
    <li><a href="#" class="inactive">Action</a></li>
</ul>
</body>
</html>

CSS

* { margin: 0; padding: 0; }
ul { list-style: none; }

body {
    padding-top: 200px;
    background: #f5f5f5;
    color: #999;
    font: 11px "Lucida Grande", "Helvetica Neue";
    text-align: center;
    
    -webkit-user-select: none;
    -moz-user-select: none;
}

a {
    display: inline-block;
    margin: 5px;
    padding: 4px 15px;
    border: 1px solid #4081af;
    border-bottom-color: #20559a;
    color: white;
    text-align: center;
    text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);
    text-decoration: none;
    
    /*Border radius*/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    
    /*Background*/
    background: #237fd7; /*Fallback*/
    background: -webkit-gradient(
                    linear,
                    left top,
                    left bottom,
                    color-stop(.2, #52a8e8),
                    color-stop(1, #2e76cf)
                );
    background: -moz-linear-gradient(
                    center top,
                    #52a8e8 20%,
                    #2e76cf 100%
                );
    
    /*Box shadow*/
    -webkit-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
                        inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
                        0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
    -moz-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
                    inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
                    0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
    box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, 
                inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 
                0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
}

a:hover,
a.hover,
a.active {
    /*Background*/
    background: #0073d2; /*Fallback*/
    background: -webkit-gradient(
                    linear,
                    left top,
                    left bottom,
                    color-stop(.2, #3e9ee5),
                    color-stop(1, #1666ca)
   ...