Skip to content

Instantly share code, notes, and snippets.

@arjabbar

arjabbar/index.html

Created November 26, 2012 01:27
Download ZIP

Revisions

  1. arjabbar created this gist Nov 26, 2012.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div>47k fans<img src="http://blogs-images.forbes.com/jonbruner/files/2011/07/facebook_logo.jpg" /><img src="http://blogs-images.forbes.com/jonbruner/files/2011/07/facebook_logo.jpg" /></div>
    3 changes: 3 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    /*Inspired by a dribbble by Erik Deiner
    http://dribbble.com/shots/363401-Facebook-button-concept
    */
    68 changes: 68 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    body {
    perspective: 500px;
    background-image: linear-gradient(top, rgba(59,89,182,0.2), transparent), url(http://www.pixeden.com/media/k2/galleries/165/001-subtle-light-pattern-background-texture-vol5.jpg);
    background-repeat: no-repeat, repeat;
    }

    div {
    margin-top: 50px;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    font-size: 2em;
    background-image: linear-gradient(top, rgba(0,0,0,0.5), transparent 80%);
    background-repeat: repeat-x;
    background-size: 15%;
    color: rgb(59,89,182);
    text-align: center;
    width: 200px;
    height: 50px;
    box-shadow: inset 0 0 5px 0 black;
    animation: shadow-up 1s ease-out;
    }

    img {
    display: inline;
    position: relative;
    width: 200px;
    height: 75px;

    }

    img:first-of-type {
    bottom: 62px;
    opacity: 1;
    transition: all 1s linear;
    transform-origin: right bottom;
    z-index: 1;
    backface-visibility: hidden;
    }

    img:last-of-type {
    bottom: 70px;
    transform-origin: center 0;
    transform: rotateX(180deg);
    transition: all 1s linear;
    }

    img:first-of-type:hover, div:hover > img:first-of-type {
    transform: rotateX(-180deg);
    }

    img:last-of-type:hover, div:hover > img:last-of-type {
    transform: rotateX(0deg) translateY(-2px);
    }

    div:hover {
    animation: shadow-down 1s ease-in;
    }

    @-webkit-keyframes shadow-down {
    from{box-shadow:inset 0 0 5px 0 black, 0 0px 0 -5px rgba(0,0,0,0.2);}
    to{box-shadow:inset 0 0 5px 0 black, 0 75px 25px -5px rgba(0,0,0,1);}
    }

    @-webkit-keyframes shadow-up {
    to{box-shadow:inset 0 0 5px 0 black, 0 0px 0 -5px rgba(0,0,0,0.2);}
    from{box-shadow:inset 0 0 5px 0 black, 0 75px 25px -5px rgba(0,0,0,1);}
    }