Botão Efeito Folha Dobrada com Css

Botão Efeito Folha Dobrada com Css

Neste artigo veja como fazer um botão efeito Folha dobrada quando passamos o mouse.

Vamos Adicionar o Html:

 <a href="#" class="botao folha"> <i class="icon icon-arrow-right"></i> Leia mais...</a>  
 <a href="#" class="botao folha"> <i class="icon icon-book"></i> Leia mais...</a>  
 <a href="#" class="botao folha"> <i class="icon icon-file-text-1"></i> Leia mais...</a>  

Vamos Adicionar o Css:

.botao {  

    display: inline-block;
    padding: 0.8em 1.7em;
    margin: 1em;
    background-color: #4C4C4C;
    text-decoration: none;
    color: #fff;
    border-radius: 3px;
    transition:0.4s;
}

.botao:hover { background-color:#0BCBD2; }

/* Efeito Folha */  
.folha {  
  display: inline-block;  
  position: relative;  
  -webkit-transform: translateZ(0);  
  transform: translateZ(0);  
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);  

}  

.folha:before {  
  pointer-events: none;  
  position: absolute;  
  content: '';  
  height: 0;  
  width: 0;  
  top: 0;  
  left: 0;  
  background:#ffffff;  
  /* IE9 */  
  background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);  
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');  
 
  /*For IE7-8-9*/  
  z-index: 1000;  
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);  
  -webkit-transition-duration: 0.3s;  
  transition-duration: 0.3s;  
  -webkit-transition-property: width, height;  
  transition-property: width, height;
  border-radius:2px;  
}
  
.folha:hover:before, .folha:focus:before, .folha:active:before {  
  width: 18px;  
  height: 18px;
} 

Veja o Resultado!

Baixar Código Veja Funcionando