CSS3 Action Button

CSS only Action Button

by criptkiller

HTML

<a href="#">Click Here!</a>

CSS

body {
     background: gray;   
}

a {
    display: block;
    position: relative;
    background: #7C9723;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#84A125), to(#5A6E19));
    border-top: 1px solid #A3C62E;
    border-left: 1px solid #809C23;
    border-bottom: 1px solid #5A6E19;      
    border-right: 1px solid #809C23;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
    padding: 6px 20px;
    width: 150px;
    text-align: center;
    margin: 50px auto 25px;
    color: #fff;
    font-weight: 900;
    font-family: sans-serif;
    text-shadow: -1px -1px 1px #657B1C;
    text-decoration: none;
}

a:active {
    box-shadow: 0 1px 4px #999;    
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7E9924), to(#546717));    
    border: 1px solid #506216;
    color: #EAEAEA;
}

a:hover {
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9FAA46), to(#768939));     
}

a:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    border-top: 2px solid #586B18;
    border-left: 2px solid #586B18;
    border-bottom: 2px solid #3A4710;
    border-right: 2px solid #3A4710;
    z-index: -1;
    margin: -8px 0 0 -22px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    box-shadow: -1px -2px 2px rgba(255, 255, 255, 0.15), 1px 2px 2px rgba(0, 0, 0, 0.1);
}