<style type="text/css">
section, section div{  
box-sizing:border-box;  
-moz-box-sizing:border-box;  
-webkit-box-sizing:border-box;  

-webkit-transition:.6s;  
  -moz-transition:.6s;  
  -o-transition:.6s;  
  transition:.6s;  
}  
section, button{  
-webkit-transition-timing-function:ease;  
  -moz-transition-timing-function:ease;  
  -o-transition-timing-function:ease;  
  transition-timing-function:ease;  
}  
section{  
text-align:center;  
display:inline-block;  
position:relative;  
padding:.375rem .375rem 0;  
height:2.5rem;  
width:200px;  
background:#A9ADB6;  

-webkit-border-radius:.25rem;  
  -moz-border-radius:.25rem;  
  border-radius:.25rem;  

-webkit-perspective:300;  
  -moz-perspective:300;  
  -ms-perspective:300;  
  -o-perspective:300;  
  perspective:300;  

-webkit-box-shadow:0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);  
  -moz-box-shadow:0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);  
  box-shadow:0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);  
}  

.button{  
opacity:0;  
}  
.button a{  
color:#444;  
text-decoration:none;  
line-height:25px;  
}  
.cover{  
position:absolute;  
top:0;  
right:0;  
bottom:0;  
left:0;  

-webkit-transform-origin:center bottom;  
  -moz-transform-origin:center bottom;  
  -ms-transform-origin:center bottom;  
  -o-transform-origin:center bottom;  
  transform-origin:center bottom;  

-webkit-transform-style:preserve-3d;  
  -moz-transform-style:preserve-3d;  
  -ms-transform-style:preserve-3d;  
  -o-transform-style:preserve-3d;  
  transform-style:preserve-3d;  
font-size:1.25em;  
color:white;  
line-height:37px;  
text-align:center;  
pointer-events:none;  
z-index:100;  
}  
.innie, .outie, .spine, .shadow{  
position:absolute;  
width:100%;  
}  
.innie, .outie{  
height:100%;  
background-image:-webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);  

-webkit-border-radius:.25rem;  
  -moz-border-radius:.25rem;  
  border-radius:.25rem;  
}  
.innie:after, .outie:after{  
content:"ვებ სამყარო";  
}  
.innie{  
background-color:#67E2FE;  
text-shadow:0 -2px 4px rgba(0,0,0,.2);  
}  
.spine{  
top:.25rem;  
background:#20C7F3;  
height:.25rem;  

-webkit-transform:rotateX(90deg);  
  -moz-transform:rotateX(90deg);  
  -ms-transform:rotateX(90deg);  
  -o-transform:rotateX(90deg);  
  transform:rotateX(90deg);  

-webkit-transform-origin:center top;  
  -moz-transform-origin:center top;  
  -ms-transform-origin:center top;  
  -o-transform-origin:center top;  
  transform-origin:center top;  
}  
.shadow{  
top:100%;  
left:0;  
height:3.5rem;  

-webkit-transform-origin:center top;  
  -moz-transform-origin:center top;  
  -ms-transform-origin:center top;  
  -o-transform-origin:center top;  
  transform-origin:center top;  

-webkit-transform:rotateX(90deg);  
  -moz-transform:rotateX(90deg);  
  -ms-transform:rotateX(90deg);  
  -o-transform:rotateX(90deg);  
  transform:rotateX(90deg);  
opacity:0;  
z-index:0;  
background-image:-webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);  
background-image:linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);  
/*border-radius*/  
-webkit-border-radius:.4rem;  
  -moz-border-radius:.4rem;  
  border-radius:.4rem;  
}  
.outie{  
background-color:#2EC8FA;  
-webkit-transform:translateZ(.25rem);  
  -moz-transform:translateZ(.25rem);  
  -ms-transform:translateZ(.25rem);  
  -o-transform:translateZ(.25rem);  
  transform:translateZ(.25rem);  
text-shadow:0 2px 4px rgba(0,0,0,.2);  
}  
section:hover{  
background:#EBEFF2;  
}  
section:hover .button{  
opacity:1;  
}  
section:hover .cover, section:hover .innie, section:hover .spine, section:hover .outie, section:hover .spine{  
-webkit-transition-timing-function:cubic-bezier(.2,.7,.1,1.1);  
  -moz-transition-timing-function:cubic-bezier(.2,.7,.1,1.1);  
  -o-transition-timing-function:cubic-bezier(.2,.7,.1,1.1);  
  transition-timing-function:cubic-bezier(.2,.7,.1,1.1);  
}  
section:hover .cover{  
-webkit-transform:rotateX(-120deg);  
  -moz-transform:rotateX(-120deg);  
  -ms-transform:rotateX(-120deg);  
  -o-transform:rotateX(-120deg);  
  transform:rotateX(-120deg);  
}  
section:hover .innie{  
background-color:#3ADAFC;  
}  
section:hover .spine{  
background-color:#52B1E0;  
}  
section:hover .outie{  
background-color:#2174A0;  
color:rgba(255,255,255,0);  
}  
section:hover .shadow{  
opacity:1;  
-webkit-transform:rotateX(45deg) scale(.95);  
  -moz-transform:rotateX(45deg) scale(.95);  
  -ms-transform:rotateX(45deg) scale(.95);  
  -o-transform:rotateX(45deg) scale(.95);  
  transform:rotateX(45deg) scale(.95);  
}  
</style>

<section>  
<div class="button">  
<a href="#">GELESSON.NET</a>  
</div>  

<div class="cover">  
<div class="innie"></div>  
<div class="spine"></div>  
<div class="outie"></div>  
</div>  
<div class="shadow"></div>  
</section>