Bouton Facebook 3D

dabblet.css

/* 
*   Bouton Facebook 3D
*/

* {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;
}

#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-transition: -moz-transform .5s ease;
	-moz-transform: translate(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);
	
}
	#btn:hover #facebook {
	-webkit-transform: translateY(5px) rotateX(-120deg);
	-moz-transform: translate(0px, 35px);
}

#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}

dabblet.html

<section id="btn">
	<p>347k 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>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}