bouton 3D inversé

by polinux

HTML

<a class="button" href="#">Download</a>

CSS

.container .button {
    margin: 0 10px 25px;
}

.button {
 font: 13px/20px 'Lucida Grande',Tahoma,Verdana,sans-serif;
    -moz-box-sizing: content-box;
    background: linear-gradient(to bottom, #F1F1F1, #DFDFDF 70%, #DADADA) repeat scroll 0 0 #DFDFDF;
    border-color: #CECECE #BABABA #A8A8A8;

    border-style: solid;
    color: #555555;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    height: 28px;
    line-height: 28px;
    outline: 0 none;
    text-decoration: none;
    text-shadow: 0 1px #FFFFFF;
    
/**/
    border-radius: 3px;
    border-width: 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px #FFFFFF;
    margin: 0;
    padding: 1px 13px 0;
    vertical-align: -5px;

}

.button:hover, .button:active {
    background: none repeat scroll 0 0 #DFDFDF;
    border-top-color: #C9C9C9;
}
.button:active, .button.green:active, .button.blue:active, .button.yellow:active, .button.red:active, .button.purple:active, .button.grey:active, .button.black:active {
    
    border-radius: 3px 3px 2px 2px;
    border-width: 1px 1px 0;
    box-shadow: 0 1px #FDFDFD inset, 0 0 0 1px #EAEAEA inset, 0 1px #A8A8A8, 0 3px #BBBBBB, 0 4px #A8A8A8, 0 5px 2px rgba(0, 0, 0, 0.25);
    margin: 0 0 5px;
    padding: 0 12px;
    vertical-align: baseline;
}