Aluminium

Posted on 01.Feb.12 by @alagoon

secondary button

.button {
    background: #E5E5E5;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F5F5F5), color-stop(100%,#D6D6D6));
    background: -moz-linear-gradient(center top, #F5F5F5 0%, #D6D6D6 100%);
    -webkit-box-shadow: 0px 1px 0px 0px #fff inset;
    -moz-box-shadow: 0px 1px 0px 0px #fff inset;
    box-shadow: 0px 1px 0px 0px #fff inset;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-transition: 0 .1s 0;
    -moz-transition: 0 .1s 0;
    -o-transition: 0 .1s 0;
    transition: 0 .1s 0;
    text-shadow: 1px 1px 0px #ffffff;
    padding: 10px 30px;
    margin: 10px 10px;
    border-color: #CCCCCC;
    border-width: 1px;
    border-style: solid;
    font-size: 21px;
}
.button:hover {
    background: #F0F0F0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#DEDEDE));
    background: -moz-linear-gradient(center top, #FCFCFC 0%, #DEDEDE 100%);
    -webkit-box-shadow: 0px 1px 0px 0px #fff inset;
    -moz-box-shadow: 0px 1px 0px 0px #fff inset;
    box-shadow: 0px 1px 0px 0px #fff inset;
}
.button:active {
    background: #E0E0E0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D6D6D6), color-stop(100%,#F5F5F5));
    background: -moz-linear-gradient(center top, #D6D6D6 0%, #F5F5F5 100%);
    -webkit-box-shadow: 0px 1px 1px #A2A2A2 inset;
    -moz-box-shadow: 0px 1px 1px #A2A2A2 inset;
    box-shadow: 0px 1px 1px #A2A2A2 inset;
    border-color: #A2A2A2;
}