Transition effect doubles with CSS

Question

Transition effect doubles with CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I am using the link code below to create a one-button fold transition effect, but I can not avoid the background button in the upper left corner of the button. What class could you use to leave that part transparent and thus show the yellow color, what is the background of the main DIV?

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

html css

asked by anonymous 23.07.2015 / 21:13

2 answers

Loop redirects - Wordpress x Google Chrome How do I leave absolute scroll to the div?

score 1 · Answer 1

You can change the background color of the effect to yellow combined with css3 opacity .

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

Take a look at the CodePen

score 0 · Answer 2

There is a missing tag or tag p with class .btn

Would not it be so?

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