Squishy Button

by secretgspot

HTML

<a href="javascript:void(0);">Squishy</a>

CSS

body {
    background: #eee;
    font-size: 100%;
    padding: 3em;
}
a {
    background: #f3b02a;
    border-radius: .25em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4),
                inset 0 .15em 0 hsla(0,0%,100%,.25),
                inset 0 -.45em 0 hsla(0,0%,100%,.25),
                inset 0 -.5em 0 hsla(0,0%,0%,.4),
                0 .5em 0 hsla(0,0%,0%,.15);
    color: hsla(0,0%,0%,.75);
    display: inline-block;
    font: bold 1em/1 sans-serif;
    padding: .5em 1.5em 1em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 .1em 0 hsla(0,0%,100%,.5);
    text-transform: uppercase;
}
a:hover,
a:focus {
    background: #fed845;
}
a:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.4),
                inset 0 .15em 0 hsla(0,0%,100%,.25),
                inset 0 -.2em 0 hsla(0,0%,100%,.25),
                inset 0 -.25em 0 hsla(0,0%,0%,.4),
                0 .25em 0 hsla(0,0%,0%,.15);
    padding-bottom: .75em;
    top: .25em;
}

JavaScript

// http://drbl.in/Wkh