Skip to content

Instantly share code, notes, and snippets.

@cfleschhut

cfleschhut/fiddle.css

Created August 7, 2011 19:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cfleschhut/1130708 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cfleschhut/1130708 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cfleschhut created this gist Aug 7, 2011.
    31 changes: 31 additions & 0 deletions fiddle.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    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);
    }
    1 change: 1 addition & 0 deletions fiddle.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <a href="#" class="btn"><span>Press this!</span></a>
    13 changes: 13 additions & 0 deletions fiddle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    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);
    })();
    7 changes: 7 additions & 0 deletions fiddle.manifest
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    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