Untitled

dabblet.css

* {margin: 0; padding: 0;}
        
    body {
        background:#e9edee;
    }
    
    #btn {
        width:103px;
        height: 35px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -17px 0 0 -51px;
        
        background-color: #d6dbde;
        background: #d6dbde -webkit-linear-gradient(bottom, rgb(215,219,222) 0, rgb(216,220,221) 60%, rgb(193,199,202) 100%);
        -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,.2), 0px 1px 1px rgba(0,0,0,.5);
        
        background: #d6dbde -moz-linear-gradient(bottom, rgb(215,219,222) 0, rgb(216,220,221) 60%, rgb(193,199,202) 100%);
        -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,.2), 0px 1px 1px rgba(0,0,0,.5);
        
        text-align: center;
        border-radius: 2px;
        line-height: 35px;
        color: #4a66a7;
        font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
        font-size: .8em;
        font-weight: bold;
        
        -webkit-perspective: 200;
        -webkit-perspective-origin: 50% 0;
        
        -moz-perspective: 200;
        -moz-perspective-origin: 50% 0;
        cursor:pointer;
    }
    
    #facebook {
        width: 103px;
        height: 35px;
        text-indent: -9999px;
        border: none;
        cursor: pointer;
        position: relative;
        bottom: 100%;
        
        -webkit-transform-origin: bottom;
        -webkit-transform-style: preserve-3d;
        -webkit-transition: -webkit-transform .5s ease;
        -webkit-transform: translateY(0) rotateX(0);
        
        -moz-transform-origin: bottom;
        -moz-transform-style: preserve-3d;
        -moz-transition: -moz-transform .5s ease;
        -moz-transform: translateX(0) rotate(0);
    }
    
    #shadow {
        display: block;
        width: 109px;
        height: 0px;
        position: absolute;
        z-index: -1;
        top: 31px;
        left: -3px;
        -webkit-transition: height 1s ease, opacity .5s ease;
        -moz-transition: height 1s ease, opacity .5s ease;
        opacity: 0;
    }
    
        #shadow img {width: 100%; height: 100%;float: left;}
    
    .logo, .top {position: absolute;}
        
    .top {
        width: 103px; 
        height: 5px;
        top: 0;
        left: 0;
        background-color: rgba(84,113,173,1);
        
        -webkit-transform-origin: top;
        -webkit-transform: rotateX(-90deg);
        -webkit-transition: background-color .5s ease-out;
        
        -moz-transform-origin: top;
        -moz-transform: rotateX(-90deg);
        -moz-transition: background-color .5s ease-out;
    }
    
    .logo {
        background: rgba(0,0,0,1) url(http://lab.aqro.be/img/fb-title.jpg) no-repeat;
        width: 100%; 
        height: 100%;
    }
    
    .recto {
        background-color: rgba(0,0,0,0);
        display: block;
        width: 100%;
        height: 100%;
        -webkit-transition: background-color .5s ease-in-out;
        -moz-transition: background-color .5s ease-in-out;
    }
    
    .verso {
        -webkit-transform: rotateX(-180deg) translateZ(5px);
        -moz-transform: rotateX(-180deg) translateZ(5px);
    }

    #btn:hover #facebook {
        -webkit-transform: translateY(5px) rotateX(-120deg);
        -moz-transform: translateY(5px) rotateX(-120deg);
    }
    
    #btn:hover .top{ background-color: rgba(50,74,122,1)}
    #btn:hover .recto {    background-color: rgba(0,0,0,.5)}
    #btn:hover #shadow { height: 45px; opacity: .5}
        
    small a {
        position: absolute;
        bottom: 20px;
        right: 20px;
        font-size: 11px;
        font-family: Georgia, serif;
        font-style: italic;
        text-decoration: none;
        color: #273038;
        border-bottom: 1px solid transparent;
    }
    
        small a:hover {
            border-bottom: 1px dotted;
        }​

dabblet.html

<script src="http://sharrre.com/js/jquery.sharrre-1.1.0.min.js?v=12"></script>
    <section id="btn">
        <p id="sharrre" data-url="http://sharrre.com/" data-text="Make your sharing widget with Sharrre (jQuery Plugin)">47k fans</p>
        <div id="facebook">
            
            <div class="logo"><div class="recto"></div></div>
            <div class="top"></div>
            <div class="logo verso"></div>
        </div>
        <div id="shadow"><img src="http://lab.aqro.be/img/shadow.png" alt="shadow" /></div>
    </section>
    <small><a href="http://dribbble.com/shots/363401-Facebook-button-concept">Concept & Design by Erik Deiner</a></small>​

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"html"}