Wifeo Creative Code

<<< back to homepage for others creatives tricks

3D CSS FACEBOOK BUTTON

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="qjkeD" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/qjkeD'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/6-3d-css-facebook-button.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.facebook_volet{
    width:200px;
    height:40px;
    padding:10px;
    background-color:#3b5998;
    position: absolute;
    z-index: 2;
}
.txt_facebook
{
    width:200px;
    height:40px;
    padding:10px;
    position: absolute;
    z-index: 1;
    background-color:#ffffff;
    line-height:40px;
    font-family:'Roboto';
    font-weight:300;
    font-size:26px;
}
.bouton_facebook:hover .facebook_volet{
    -webkit-animation: anim 1.2s;
  	-webkit-animation-iteration-count:1;
  	-webkit-animation-fill-mode:forwards;
    -ms-animation: anim 1.2s;
  	-ms-animation-iteration-count:1;
  	-ms-animation-fill-mode:forwards;
    -moz-animation: anim 1.2s;
  	-moz-animation-iteration-count:1;
  	-moz-animation-fill-mode:forwards;
    animation: anim 1.2s;
  	animation-iteration-count:1;
  	animation-fill-mode:forwards;
}

@-webkit-keyframes anim {
    0% {
    -webkit-transform: perspective( 600px ) rotateX( 0deg );
    -webkit-transform-origin:100% 100%;
  }
    40% {
    -webkit-transform: perspective( 600px ) rotateX( -220deg );
    -webkit-transform-origin:100% 100%;
  }
    50% {
    -webkit-transform: perspective( 600px ) rotateX( -160deg );
    -webkit-transform-origin:100% 100%;
  }
    60% {
    -webkit-transform: perspective( 600px ) rotateX( -210deg );
    -webkit-transform-origin:100% 100%;
  }
    70% {
    -webkit-transform: perspective( 600px ) rotateX( -190deg );
    -webkit-transform-origin:100% 100%;
  }
    80% {
    -webkit-transform: perspective( 600px ) rotateX( -200deg );
    -webkit-transform-origin:100% 100%;
  }
    100% {
    -webkit-transform: perspective( 600px ) rotateX( -180deg );
    -webkit-transform-origin:100% 100%;
  }
}
@-ms-keyframes anim {
    0% {
    -ms-transform: perspective( 600px ) rotateX( 0deg );
    -ms-transform-origin:100% 100%;
  }
    40% {
    -ms-transform: perspective( 600px ) rotateX( -220deg );
    -ms-transform-origin:100% 100%;
  }
    50% {
    -ms-transform: perspective( 600px ) rotateX( -160deg );
    -ms-transform-origin:100% 100%;
  }
    60% {
    -ms-transform: perspective( 600px ) rotateX( -210deg );
    -ms-transform-origin:100% 100%;
  }
    70% {
    -ms-transform: perspective( 600px ) rotateX( -190deg );
    -ms-transform-origin:100% 100%;
  }
    80% {
    -ms-transform: perspective( 600px ) rotateX( -200deg );
    -ms-transform-origin:100% 100%;
  }
    100% {
    -ms-transform: perspective( 600px ) rotateX( -180deg );
    -ms-transform-origin:100% 100%;
  }
}
@-moz-keyframes anim {
    0% {
    -moz-transform: perspective( 600px ) rotateX( 0deg );
    -moz-transform-origin:100% 100%;
  }
    40% {
    -moz-transform: perspective( 600px ) rotateX( -220deg );
    -moz-transform-origin:100% 100%;
  }
    50% {
    -moz-transform: perspective( 600px ) rotateX( -160deg );
    -moz-transform-origin:100% 100%;
  }
    60% {
    -moz-transform: perspective( 600px ) rotateX( -210deg );
    -moz-transform-origin:100% 100%;
  }
    70% {
    -moz-transform: perspective( 600px ) rotateX( -190deg );
    -moz-transform-origin:100% 100%;
  }
    80% {
    -moz-transform: perspective( 600px ) rotateX( -200deg );
    -moz-transform-origin:100% 100%;
  }
    100% {
    -moz-transform: perspective( 600px ) rotateX( -180deg );
    -moz-transform-origin:100% 100%;
  }
}
@keyframes anim {
    0% {
    transform: perspective( 600px ) rotateX( 0deg );
    transform-origin:100% 100%;
  }
    40% {
    transform: perspective( 600px ) rotateX( -220deg );
    transform-origin:100% 100%;
  }
    50% {
    transform: perspective( 600px ) rotateX( -160deg );
    transform-origin:100% 100%;
  }
    60% {
    transform: perspective( 600px ) rotateX( -210deg );
    transform-origin:100% 100%;
  }
    70% {
    transform: perspective( 600px ) rotateX( -190deg );
    transform-origin:100% 100%;
  }
    80% {
    transform: perspective( 600px ) rotateX( -200deg );
    transform-origin:100% 100%;
  }
    100% {
    transform: perspective( 600px ) rotateX( -180deg );
    transform-origin:100% 100%;
  }
}

HTML CODE :

<div align="center" style="height:80px;">
  <div class="bouton_facebook" style="width:200px;">
    <div class="facebook_volet"><img src="http:YOUR-URL-IMAGE.png"/></div>
    <a href="#123" style="text-decoration:none; color:#3b5998;">
      <div class="txt_facebook">Facebook</div>
    </a>
  </div>
</div>