﻿.button{z-index:1;overflow:hidden;width:270px;height:58px;background:#6959ff;box-shadow:0 2px 1px rgba(0,0,0,.3);}
.second{z-index:3;background:linear-gradient(#375d9b,#fff);background:-webkit-linear-gradient(#375d9b,#fff);-webkit-transform:translatex(-310px) skew(0);transform:translatex(-310px) skew(0);-ms-transform:translatex(-310px) skew(0);-webkit-animation:removesecond 1s reverse;}
.first,.second{position:relative;width:300px;height:70px;border-radius:10px;box-shadow:inset 0 2px 1px hsla(0,0%,100%,.5);text-align:center;line-height:70px;}
.first{top:-70px;z-index:2;background:linear-gradient(#3570d6,#215dc4);background:-webkit-linear-gradient(#3570d6,#215dc4);}
.second a{display:block;}
.button:hover .second{-webkit-animation:movesecond 1s forwards;animation:movesecond 1s forwards;}
#Third{width:300px;height:70px;border-radius:10px;background:linear-gradient(#94f,#7a22e5);background:-webkit-linear-gradient(#94f,#7a22e5);box-shadow:inset 0 2px 1px hsla(0,0%,100%,.5);-webkit-transform:translateY(10px);transform:translateY(10px);-ms-transform:translateY(10px);}
.second:active #Third{-webkit-animation:moveThird 1s forwards;animation:moveThird 1s forwards;}
@-webkit-keyframes removesecond{0%{-webkit-transform:translateX(-320px) skew(0);}
20%{-webkit-transform:translateX(50px) skew(-20deg);}
40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
80%{-webkit-transform:translateX(-15px) skew(8deg);}
to{-webkit-transform:translateX(0) skew(0);}
}
@-webkit-keyframes movesecond{0%{-webkit-transform:translateX(-320px) skew(0);}
20%{-webkit-transform:translateX(50px) skew(-20deg);}
40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
80%{-webkit-transform:translateX(-15px) skew(8deg);}
to{-webkit-transform:translateX(0) skew(0);}
}
@keyframes movesecond{0%{-webkit-transform:translateX(-320px) skew(0);}
20%{-webkit-transform:translateX(50px) skew(-20deg);}
40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
80%{-webkit-transform:translateX(-15px) skew(8deg);}
to{-webkit-transform:translateX(0) skew(0);}
}
@-webkit-keyframes moveThird{0%{-webkit-transform:translateY(10px);}
20%{-webkit-transform:translateY(-170px);}
40%{-webkit-transform:translateY(50dpx);}
60%{-webkit-transform:translateY(-25dpx);}
80%{-webkit-transform:translateY(15px);}
to{-webkit-transform:translateY(-70px);}
}
@keyframes moveThird{0%{-webkit-transform:translateY(10px);}
20%{-webkit-transform:translateY(-170px);}
40%{-webkit-transform:translateY(50dpx);}
60%{-webkit-transform:translateY(-25dpx);}
80%{-webkit-transform:translateY(-95px);}
to{-webkit-transform:translateY(-70px);}
}