CSS button with folded corner effect and animations - html

Question

I used the code below to create an effect on the folded corner button, but I can not avoid white background which is in the upper left corner of the button. That class could use to make this transparent part and thus show the yellow color, which is the background of the main DIV?
http://codepen.io/rsvaz83/pen/aORzBy
.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;
}
<div class="back">
BUTTON EFFECT
</div>

Answer 1

Just change the 1st white to #fc0 (the color of the background bar) in the line below.
background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
^^^^^
I also simplified the CSS slightly, merged transition rules, and remove that filter hack, it won't be able to get the effect you want on outdated IEs anyway, updated code snippet follows.
.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;
z-index: 1000;
background: linear-gradient(135deg, #fc0 45%, #aaa 50%, #ccc 50%, #fff 80%);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
transition: 0.3s;
}
.curl-top-left:hover:before,
.curl-top-left:focus:before,
.curl-top-left:active:before {
width: 40px;
height: 40px;
}
<div class="back">
BUTTON EFFECT
</div>

Answer 2

Change the first value of the background to the yellow color.
background: transparent linear-gradient(135deg, #Fc0 45%, #AAA 50%, #CCC 56%, #FFF 80%) repeat scroll 0% 0%;

Answer 3

You can set the color of the folded corner in curl-top-left:before:
.curl-top-left:before {
[...]
background: linear-gradient(135deg, HERE 45%,
#aaaaaa 50%,
#cccccc 56%,
white 80%);
[...]
}
Just replace HERE with your desired color (such as #fc0 for example). You cannot use transparency here, since the folded corner is drawn on top of the button, so when you set it to transparent, you will always see the button under the folded corner.

Answer 4

You can change your background to a gradient.
and move it in sync with the efect of the pseudo element.
.back {
background: #fc0;
padding-left: 30px;
vertical-align: top;
padding-top: 20px;
padding-bottom: 20px;
}
.button {
display: inline-block;
padding: 1em;
margin: 0em -2em;
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);
background-image: linear-gradient(135deg, transparent 30px, #007E9F 30px);
background-position: -20px -20px;
background-size: 200% 200%;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: background-position;
transition-property: background-position;
}
.curl-top-left:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
left: 0;
/* IE9 */
background: linear-gradient(135deg, transparent 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: inherit;
transition-duration: inherit;
-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;
}
.curl-top-left:hover,
.curl-top-left:focus,
.curl-top-left:active {
background-position: 0px 0px;
}
<div class="back">HI!
BUTTON EFFECT
</div>