.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)}
}