CSS3 Button

fiddle.css

body { font: 250%/1.2 sans-serif; background: #eee; }
a { color: #fff; text-decoration: none; outline: none; }
.btn {
    display: inline-block;
    border-radius: 8px;
    box-shadow: 0 8px 0 #1a74a1,
        0 15px 20px rgba(0, 0, 0, 0.35);
    -moz-transition: box-shadow 0.2s ease-in-out;
    -webkit-transition: box-shadow 0.2s ease-in-out;
}
.btn span {
    display: inline-block;
    padding: 10px 25px;
    font-family: "Carter One", sans-serif;
    text-shadow: 0 -1px 1px rgba(19, 65, 88, 0.8);
    background: #3194c6;
    background: -moz-linear-gradient(#3194c6, #5bacd6);
    background: -webkit-linear-gradient(#3194c6, #5bacd6);
    border-radius: 8px;
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.15);
    -moz-transition: -moz-transform 0.2s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
}
.btn:active {
    box-shadow: 0 8px 0 #1a74a1,
        0 12px 10px rgba(0, 0, 0, 0.3);
}
.btn:active span {
    -moz-transform: translate(0, 4px);
    -webkit-transform: translate(0, 4px);
}

fiddle.html

<a href="#" class="btn"><span>Press this!</span></a>

fiddle.js

WebFontConfig = {
    google: {
        families: ['Carter+One']
    }
};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();

fiddle.manifest

name: CSS3 Button
description: Polished Button without using Images
authors:
  - Christian Fleschhut
resources:
  - http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/
normalize_css: no

http://jsfiddle.net/gh/gist/jquery/1.6.2/1130708/