|
@import url(http://fonts.googleapis.com/css?family=Droid+Serif|Varela+Round); |
|
|
|
$timing:0.4s; |
|
$blue:#0079c2; |
|
$yellow:#fae900; |
|
|
|
*, *:before, *:after { |
|
margin:0; |
|
padding:0; |
|
box-sizing:border-box; |
|
} |
|
body { |
|
text-align:center; |
|
font-family:'Droid Serif', serif; |
|
background-color:#fafafa; |
|
} |
|
article { |
|
padding:10rem 1rem; |
|
border-bottom:1px solid #ebeaea; |
|
|
|
p { |
|
display:block; |
|
max-width:50rem; |
|
margin:0 auto; |
|
color:grey; |
|
text-align:left; |
|
font-size:1.2rem; |
|
line-height:1.7rem; |
|
|
|
&::selection {color:black;background-color:$yellow;} |
|
|
|
a { |
|
color:$blue; |
|
text-decoration:none; |
|
transition:all .15s; |
|
&:hover {background-color:$yellow;color:black;} |
|
&::selection {color:black;background-color:$yellow;} |
|
} |
|
} |
|
} |
|
|
|
//======================================================== |
|
// First Btn |
|
//======================================================== |
|
.btn-fold-1 { |
|
position:relative; |
|
display:inline-block; |
|
width:28rem; |
|
z-index:1; |
|
font-family:'Varela Round', sans-serif; |
|
text-decoration:none; |
|
font-size:2.5rem; |
|
color:black; |
|
text-transform:uppercase; |
|
letter-spacing:0.1rem; |
|
transform-style:preserve-3d; |
|
perspective:800px; |
|
perspective-origin:50% 200%; |
|
transform:translateX(-25%) translateZ(0); |
|
transition:transform ($timing * 2); |
|
|
|
span { |
|
position:relative; |
|
display:block; |
|
width:50%; |
|
float:left; |
|
padding-top:1rem; |
|
padding-bottom:.7rem; |
|
text-align:right; |
|
|
|
&:last-child { |
|
z-index:2; |
|
padding-right:1rem; |
|
padding-left:.6rem; |
|
text-align:left; |
|
background-color:$yellow; |
|
} |
|
|
|
&:first-child { |
|
z-index:3; |
|
padding-right:.6rem; |
|
padding-left:1rem; |
|
pointer-events:none; |
|
background-color:$yellow; |
|
backface-visibility:visible; |
|
transform-origin:100% 50%; |
|
transform:rotateY(179.9deg); |
|
transition:transform $timing ease-in-out; |
|
|
|
&:before { |
|
content:'Donate'; |
|
position:absolute; |
|
top:0; |
|
right:0; |
|
bottom:0; |
|
left:0; |
|
padding-top:1rem; |
|
z-index:4; |
|
color:white; |
|
text-align:center; |
|
background-color:$blue; |
|
transform:rotateY(180deg); |
|
transition:color 0s ($timing / 2), background-color 0s ($timing / 2); |
|
transition-timing-function:ease-in-out; |
|
} |
|
} |
|
} |
|
&:hover {transform:translateX(0) translateZ(0);} |
|
&:hover > span:first-child {transform:rotateY(0);} |
|
&:hover > span:first-child:before { |
|
color:transparent; |
|
background-color:transparent; |
|
} |
|
} |
|
|
|
//======================================================== |
|
// Second Btn |
|
//======================================================== |
|
.btn-fold-2 { |
|
position:relative; |
|
display:inline-block; |
|
width:14rem; |
|
z-index:1; |
|
font-family:'Varela Round', sans-serif; |
|
color:white; |
|
text-decoration:none; |
|
font-size:2.5rem; |
|
text-transform:uppercase; |
|
letter-spacing:0.1rem; |
|
background-color:$blue; |
|
transform-style:preserve-3d; |
|
transform:translateX(.5rem); |
|
transition:background-color 0s ($timing / 2) ease-in-out; |
|
|
|
span { |
|
position:relative; |
|
width:50%; |
|
float:left; |
|
padding-top:1rem; |
|
padding-bottom:.7rem; |
|
pointer-events:none; |
|
transform-style:preserve-3d; |
|
perspective:400px; |
|
perspective-origin:50% 200%; |
|
|
|
&:after { |
|
position:absolute; |
|
top:0; |
|
right:0; |
|
bottom:0; |
|
left:0; |
|
transition:transform $timing, opacity 0s ($timing / 2) ease-in-out; |
|
} |
|
} |
|
span:first-child { |
|
z-index:3; |
|
opacity:1; |
|
text-align:right; |
|
background-color:$blue; |
|
box-shadow:-1rem 0 0 $blue; |
|
transition:opacity 0s; |
|
|
|
&:after { |
|
content:'ate'; |
|
opacity:1; |
|
padding-top:1rem; |
|
text-align:left; |
|
background-color:$blue; |
|
transform-origin:0 50%; |
|
transform:translateX(100%) rotateY(0); |
|
} |
|
} |
|
span:last-child { |
|
z-index:2; |
|
text-align:left; |
|
color:black; |
|
background-color:$yellow; |
|
|
|
&:after { |
|
content:'don'; |
|
opacity:0; |
|
padding-top:1rem; |
|
text-align:right; |
|
background-color:$yellow; |
|
box-shadow:-1rem 0 0 $yellow; |
|
transform-origin:100% 50%; |
|
transform:translateX(-100%) rotateY(180deg); |
|
} |
|
} |
|
&:hover {background-color:$yellow;} |
|
&:hover > span:first-child {opacity:0;transition:opacity 0s $timing;} |
|
&:hover > span:first-child:after {opacity:0;transform:translateX(100%) rotateY(-180deg);} |
|
&:hover > span:last-child:after {opacity:1;transform:translateX(-100%) rotateY(0.1deg);} |
|
} |