Посоветовали этот форум как лучший в помощи. Помогите!

[Паша]

Есть такая кнопочка которую вполне можно использовать.
Но есть одно НО.
При наведении низ кнопки показывает отраженный текст.
Можно ли сделать, чтобы текст не был отраженным?

Собственно код:

Спойлер

section, section div{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

-webkit-transition:1.0s;
-moz-transition:1.0s;
-o-transition:1.0s;
transition:1.0s;
}
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;

margin: 22px;
padding:.375rem .375rem 0;
height:2.5rem;
width:300px;

-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:#000;
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:flat;
-moz-transform-style:flat;
-ms-transform-style:flat;
-o-transform-style:flat;
transform-style:flat;
font-size:1.25em;
color:white;
line-height:37px;
text-align:center;
pointer-events:none;

}
.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:"ГАЗЕТА ЗА 07.02.2015";
}
.innie{
color: black;

}
.innie2:after, .outie2:after { content:"ГАЗЕТА ЗА 28.02.2015"!important; }
.innie3:after, .outie3:after { content:"ГАЗЕТА ЗА 07.03.2015"!important; }
.innie4:after, .outie4:after { content:"ГАЗЕТА ЗА 21.03.2015"!important; }
.innie5:after, .outie5:after { content:"ГАЗЕТА ЗА 28.03.2015"!important; }
.innie6:after, .outie6:after { content:"ГАЗЕТА ЗА 04.04.2015"!important; }
.innie7:after, .outie7:after { content:"ГАЗЕТА ЗА 11.04.2015"!important; }
.innie8:after, .outie8:after { content:"ГАЗЕТА ЗА 18.04.2015"!important; }
.innie9:after, .outie9:after { content:"ГАЗЕТА ЗА 25.04.2015"!important; }
.innie10:after, .outie10:after { content:"ГАЗЕТА ЗА 02.05.2015"!important; }
.innie11:after, .outie11:after { content:"ГАЗЕТА ЗА 09.05.2015"!important; }



.outie{
background-color:#F58220;

}
section:hover{
background:#F58220;
}
section:hover .button{
opacity: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:#000;

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

<section> 
  <div class="button"> 
  <a href="">Уроки 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> 
  <div class="button"> 
  <a href="">Уроки HTML CSS</a> 
   
  </div> 
  <div class="cover"> 
<div class="innie innie2"></div> 
  <div class="spine"></div> 
  <div class="outie outie2"></div>
</div> 
  <div class="shadow"></div> 
</section>

Пример можно посмотреть тут