Skip to content

Instantly share code, notes, and snippets.

@arjabbar
Created November 26, 2012 01:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arjabbar/4146114 to your computer and use it in GitHub Desktop.
Save arjabbar/4146114 to your computer and use it in GitHub Desktop.
A CodePen by Abdur Jabbar. Facebook widget - Inspired by a dribble by Erik Deiner. http://dribbble.com/shots/363401-Facebook-button-concept
<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>
/*Inspired by a dribbble by Erik Deiner
http://dribbble.com/shots/363401-Facebook-button-concept
*/
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);}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment