Code:
.button{font:700 20px Arial,sans-serif;color:rgba(0,0,0,.8);text-shadow:0 .1em 0 rgba(255,255,255,.5);display:inline-block;outline:0;cursor:pointer;padding:.4em 2em .5em;-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em;border:1px solid;border-color:#bbb #a2a2a2 #888;background-color:#eee;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q0ZDRkNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);background-size:100%;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#eee),color-stop(100%,#d4d4d4));background-image:-moz-linear-gradient(#eee,#d4d4d4);background-image:-webkit-linear-gradient(#eee,#d4d4d4);background-image:linear-gradient(#eee,#d4d4d4);-moz-box-shadow:0 .1em .5em rgba(0,0,0,.1),0 .1em .2em rgba(0,0,0,.3),0 -.1em .07em rgba(0,0,0,.3) inset,0 .1em .07em rgba(255,255,255,.2) inset;-webkit-box-shadow:0 .1em .5em rgba(0,0,0,.1),0 .1em .2em rgba(0,0,0,.3),0 -.1em .07em rgba(0,0,0,.3) inset,0 .1em .07em rgba(255,255,255,.2) inset;box-shadow:0 .1em .5em rgba(0,0,0,.1),0 .1em .2em rgba(0,0,0,.3),0 -.1em .07em rgba(0,0,0,.3) inset,0 .1em .07em rgba(255,255,255,.2) inset;-moz-transition:all .1s;-o-transition:all .1s;-webkit-transition:all .1s;transition:all .1s}.button:hover{-moz-box-shadow:0 .1em .5em rgba(0,0,0,.4),0 .1em .2em rgba(0,0,0,.4),0 -.1em .07em rgba(0,0,0,.3) inset,0 .1em .07em rgba(255,255,255,.2) inset;-webkit-box-shadow:0 .1em .5em rgba(0,0,0,.4),0 .1em .2em rgba(0,0,0,.4),0 -.1em .07em rgba(0,0,0,.3) inset,0 .1em .07em rgba(255,255,255,.2) inset;box-shadow:0 .1em .5em rgba(0,0,0,.4),0 .1em .2em rgba(0,0,0,.4),0 -.1em .07em rgba(0,0,0,.3) inset,0 .1em .07em rgba(255,255,255,.2) inset}.button:active{padding:.4em 2em;margin-top:.1em;border-color:#a2a2a2 #bbb #eee;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UxZTFlMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);background-size:100%;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#e1e1e1),color-stop(100%,#eee));background-image:-moz-linear-gradient(#e1e1e1,#eee);background-image:-webkit-linear-gradient(#e1e1e1,#eee);background-image:linear-gradient(#e1e1e1,#eee);-moz-box-shadow:0 .1em .2em rgba(0,0,0,.1) inset,0 .1em .1em rgba(0,0,0,.2) inset,.05em 0 .07em rgba(0,0,0,.2) inset,-.05em 0 .07em rgba(0,0,0,.2) inset;-webkit-box-shadow:0 .1em .2em rgba(0,0,0,.1) inset,0 .1em .1em rgba(0,0,0,.2) inset,.05em 0 .07em rgba(0,0,0,.2) inset,-.05em 0 .07em rgba(0,0,0,.2) inset;box-shadow:0 .1em .2em rgba(0,0,0,.1) inset,0 .1em .1em rgba(0,0,0,.2) inset,.05em 0 .07em rgba(0,0,0,.2) inset,-.05em 0 .07em rgba(0,0,0,.2) inset;-moz-transition:all 10ms;-o-transition:all 10ms;-webkit-transition:all 10ms;transition:all 10ms}