0

Estou usado o código http://codepen.io/rsvaz83/pen/aORzBy abaixo para criar um efeito de transição de dobra num botão, mas não consigo evitar o fundo branco que fica no canto superior esquerdo do botão. Que classe poderia utilizar para deixar essa parte transparente e assim mostrar a cor amarelo, que é o background da DIV principal?

<div class="back">
    <a href="#" class="button curl-top-left">BUTTON EFFECT</a>
</div>

.back {
    background: #fc0;
}

.button {  
    display: inline-block;  
    padding: 1em;  
    margin: 1em;  
    background-color:#007E9F;  
    text-decoration: none;  
    color: white;  
}  

.curl-top-left {  
    display: inline-block;  
    position: relative;  
    -webkit-transform: translateZ(0);  
    transform: translateZ(0);  
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);  
}  

.curl-top-left:before {  
    pointer-events: none;  
    position: absolute;  
    content: '';  
    height: 0;  
    width: 0;  
    top: 0;  
    left: 0;  
    /* 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.4);  
    -webkit-transition-duration: 0.3s;  
    transition-duration: 0.3s;  
    -webkit-transition-property: width, height;  
    transition-property: width, height;  
}  
.curl-top-left:hover:before,
.curl-top-left:focus:before,
.curl-top-left:active:before {  
    width: 40px;  
    height: 40px; 
}  

2 Respostas 2

1

Você pode alterar o background-color do efeito para o amarelo combinado com opacity do css3.

.curl-top-left:before {
    /*alteração*/
    background: linear-gradient(135deg, transparent 45%, #fc0 30%, #fc0 50%, #fc0 60%);
    /*nova propriedade*/
    opacity: 0.7; 
}

De uma olhada no CodePen

0

Está faltando uma etiqueta ou tag p com a classe .btn

Não seria assim?

<div class="back">
    <p class="btn">
        <a href="#" class="button curl-top-left">BUTTON EFFECT</a>
    </p>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .