Необычная раскрывающаяся CSS3 кнопка

<section>
  <div class="button">
  <a href="http://get-element.3dn.ru">Уроки HTML CSS</a>
   
  </div>
  <div class="cover">
  <div class="innie"></div>
  <div class="spine"></div>
  <div class="outie"></div>
</div>
  <div class="shadow"></div>
</section>

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);
}

.innie:after, .outie:after { content:"Тут ваш заголовок"; }

<div class="innie"></div>//Это заголовок сзади нашей крышки
  <div class="spine"></div>
  <div class="outie"></div> //Это заголовок спереди нашей крышки

<div class="innie innie2"></div>
  <div class="spine"></div>
  <div class="outie outie2"></div>

.innie2:after, .outie2:after { content:"Тут ваш заголовок #2"!important; }