Code: CSS Button with Flip Effect

Do you have something to hide in a box of your web page button? Then this code is for you! When the mouse pointer hovers the button, it flips down and shows what located in it.This awesome effect can improve visitors experience of your site!

<!-- this script got from www.cssfreecode.com -->
<html><head>
<style>.button {
  -webkit-transition:transform .28s ease-in;  
  -moz-transition:transform .28s ease-in; 
  -o-transition:transform .28s ease-in;  
  transition:transform .28s ease-in;
}

.wrap {
  margin:1em auto;
  width: 5em;
  height: 2em;
  font-size:3em;
  position: relative;
  -webkit-perspective: 800px;
  perspective: 800px;
  background:#f2f2f2;
  border-radius:5px;
  box-shadow:inset 0 0 0.2em 0 rgba(0,0,0,0.25);
}

.button {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  cursor:pointer;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  z-index:2;
}

.wrap:hover .button {
  -webkit-transform: rotateX(-150deg);
  transform: rotateX(-150deg);
}

.button div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius:5px;
}

.front {
  background:#00829E;
  z-index:2;
}

.back {
  background:#333 ;
  transform: rotateX( 180deg );
  z-index:2;
  box-shadow: 0 0.2em 0.2em 0 rgba(0,0,0,0.15);
}

.front span {
  font-size:0.7em;
  float:left;
  width:100%;
  padding:0.65em 0;
  text-align:center;
  color:#fff;
}

/* the bow-tie */

.tie-wrap {
  position:relative;
  margin:0.1em auto;
  border-radius:5px;
  overflow:hidden;
  height:19px;
  width:35px;
  -webkit-transform:scale(1.4);
  transform:scale(1.4);
}

.tie {
   position:absolute;
   background-color:#999;
   width: 10px; 
   height: 10px;
  border-radius:3px;
  top:5px;
  left:13px;
}

.tie:before {
   content:'';
  position:absolute;
  right:-14px;
  top:-5px;
   width: 0;
   height: 0;
   border-right: 25px solid #999;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
}

.tie:after {
  position:absolute;
   content:'';
  left:-14px;
  top:-5px;
   width: 0;
   height: 0;
   border-left: 25px solid #999;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
}



.inside {
  width:100%;
  padding:0.3em 0;
  position:absolute;
  text-align:center;
  color:#999;
  font-size:0.7em;
}

body {
  font-family:'Open Sans', sans-serif;
  margin:0;
}

header {
  float:left;
  width:100%;
  background:#14b5d1; /*14b5d1*/
  padding:1.5em 3em 2em;
}

section {
  float:left;
  width:100%;
}

h1, h2 {
  font-family:'Maven Pro', sans-serif;
  margin:0;
  font-weight:500;
}

h1 {
  color:#fff;
  font-size:2.5em;
}

h2 {
  color:#56dcee;
}
</style></head><body>

<link href='http://cssfreecode.com/view/files/1115_font.css' rel='stylesheet' type='text/css'> 

<section>
  
<div class="wrap">
   <div class="inside">
     <span>Hello</span>
     <div class="tie-wrap">
       <div class="tie"></div>
     </div>
   </div>
  <div class="button">
    <div class="front">
      <span>Hover!</span>
    </div>
    <div class="back"></div>
  </div>
</div>
  
</section>
<script src='http://cssfreecode.com/view/files/jquery.min.js'></script>
</body></html>
<font face="Tahoma"><a target="_blank" href="http://www.cssfreecode.com/"><span style="font-size: 8pt; text-decoration: none">CSS Free Code</span></a></font>

If you don't know how to use this code or need more information Click here!


	You can leave comments once you sign in/up.

CSS Best Codes

Code: CSS Button with Flip Effect

You can leave comments once you sign in/up.

Links