Chunky CSS3 buttons

Great buttons - design by Orman, coding by someone and adjustments by me

by volcanicpixels

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Chunky 3D Web Buttons</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <a href="#" class="button grey">Download</a>
    
    <a href="#" class="button pink">Download</a>
    
    <a href="#" class="button blue">Download</a>
    
    <a href="#" class="button green">Download</a>
    
    <a href="#" class="button teal">Download</a>
    
    <a href="#" class="button black">Download</a>
    
    <a href="#" class="button dark_grey">Download</a>
    
    <a href="#" class="button orange">Download</a>
    
    <a href="#" class="button purple">Download</a>
    
    <a href="#" class="button blue_alt">Download</a>
    
    <a href="#" class="button forrst">Download</a>
    
    <a href="#" class="button dribbble">Download</a>
    
    <a href="#" class="button twitter">Download</a>
    
    <a href="#" class="button facebook">Download</a>
    
    <a href="#" class="button crisp">Download</a>
    
    <a href="#" class="button lovedsgn">Download</a>
    
    <a href="#" class="button xbox">Download</a>
    
    <a href="#" class="button devart">Download</a>
    
    <a href="#" class="button dsgnmoo">Download</a>
    
    <a href="#" class="button rss">Download</a>
    
    <a href="#" class="button yahoo">Download</a>
    
    <a href="http://www.premiumpixels.com/freebies/chunky-3d-webbuttons-psd/" class="button" target="_blank">Chunky 3D Web Buttons (PSD)</a>
    
</body>
</html>

CSS

/**
 * Chunky 3D Web Buttons
 *
 * Inspiration was taken from:
 * - http://www.premiumpixels.com/freebies/chunky-3d-webbuttons-psd/
 */
 
/**
 * Shadow
 */
a.button::before {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-box-shadow: #959595 0 2px 5px;
    -moz-box-shadow: #959595 0 2px 5px;
    border-radius: 3px;
    box-shadow: #959595 0 2px 5px;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    padding: 2px 0 0;
    position: absolute;
    top: 0;
    width: 100%; }
    
a.button:active::before { padding: 1px 0 0; }

/**
 * Grey
 */
a.button {
    -moz-box-shadow: inset 0 0 0 1px #63ad0d;
    -webkit-box-shadow: inset 0 0 0 1px #63ad0d;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #eee;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));
    background: -moz-linear-gradient(#eee, #e2e2e2);
    background: linear-gradient(#eee, #e2e2e2);
    border: solid 1px #d0d0d0;
    border-bottom: solid 3px #b2b1b1;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px #f5f5f5;
    color: #555;
    display: inline-block;
    font: bold 12px Arial, Helvetica, Clean, sans-serif;
    margin: 0 25px 25px 0;
    padding: 10px 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 #fafafa; }
    
a.button:hover {
    background: #e4e4e4;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));
    background: -moz-linear-gradient(#e4e4e4, #ededed);
    background: linear-gradient(#e4e4e4, #ededed);
    border: solid 1px #c2c2c2;
    border-bottom: solid 3px #b2b1b1;
    box-shadow: inset 0 0 0 1px #efefef; }
    
a.button:active {
    background: #dfdfdf;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));
    background: -moz-linear-gradient(#dfdfdf, #e3e3e3);
    background: linear-gradient(#dfdfdf, #e3e3e3);
    border: solid 1px #959595;
    box-shadow:...