Shiny Buttons

Buttons!

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<a class="button" href="javascript:void(0);">Anchor</a>
<button class="button">Button</button>

CSS

body {
    background: #2a2a2a url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
    font-size: 0;
    margin: 0;
    padding: 20px;
}

/* Button */

.button {
    background-color: #222;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:         linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    border: 1px solid #111;
    color: #c6c6c6;
    cursor: pointer;
    display: inline-block;
    font: 18px/12px 'Yanone Kaffeesatz';
    margin: 20px;
    padding: 10px 15px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 1px hsla(0,0%,0%,.8);
    vertical-align: top;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
       -moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
            box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
}
.button:hover,
.button:focus {
    background-color: #242424;
    color: #f6f6f6;
    -webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
       -moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
            box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
}
.button:after {
    background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
    background-image:    -moz-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8),...