CSS3 3D Button

by Josh Pullen

HTML

<a href="#" class="button">A Button</a>

CSS

.button {
    padding:7px 10px;
    background-color:#0E61C4;
    background:linear-gradient(#38e, #0E61C4);
    background:-o-linear-gradient(#38e, #0E61C4);
    background:-moz-linear-gradient(#38e, #0E61C4);
    background:-webkit-linear-gradient(#38e, #0E61C4);
    background:-ms-linear-gradient(#38e, #0E61C4);
    display:inline-block;
    color:white;
    text-decoration:none;
    border-radius:4px;
    border:1px solid #023A7D;
    border-bottom:4px solid #023A7D;
    margin:0px;
    transition:all .1s ease-in-out;
    box-shadow: inset 0px 7px 0px -6px rgba(225,225,225, 0.5)
}
.button:active {
    border-bottom:1px solid #023A7D;
    margin-top:3px;
}