@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@800&display=swap');

a {
  text-decoration:none;
  color:#6a0000;
  font-family: 'Merriweather Sans', sans-serif;
  font-size:22px;
  text-shadow: 0px 2px 1px rgba(0,0,0, 0.5);
}


#button{
  width:300px;
  height:70px;
  background:#6959ff;
  margin:20px auto;
  z-index:1;
  overflow:hidden;
  border: 1px solid #606060;
  border-radius:10px;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3);
}

#second {
  width:300px;
  height:70px;
  background-color: #c939f7;
  -webkit-transform:translatex(-310px) skew(0deg);
  -moz-transform:translatex(-310px) skew(0deg);
  -ms-transform:translatex(-310px) skew(0deg);
  -o-transform:translatex(-310px) skew(0deg);
  transform:translatex(-310px) skew(0deg);
  text-align:center;
  line-height:70px;
  z-index:3;
  position: relative;
  border-radius:10px;
  box-shadow:inset 0px 2px 1px rgba(255, 255, 255, 0.5);
  -webkit-animation:removesecond 1s reverse;
}


#first {
  width:300px;
  height:70px;
  color: #6a0000;
  background-color: #ff0000;
  position: relative;
  top:-70px;
  text-align:center;
  line-height:70px;
  z-index:2;
  border-radius:10px;
  box-shadow:inset 0px 2px 1px rgba(255, 255, 255, 0.5);
}

#first a {
  color: #fff
}

#second a {
  display:block;
  text-decoration:none;
  color: #fff;
}

#button:hover #second {
  -webkit-animation:movesecond 1s forwards;
  -moz-animation:movesecond 1s forwards;
  -ms-animation:movesecond 1s forwards;
  -o-animation:movesecond 1s forwards;
  animation:movesecond 1s forwards;
}

#Third {
  width:300px;
  height:70px;
  background:linear-gradient(#9944ff, #7a22e5);
  background:-webkit-linear-gradient(#9944ff, #7a22e5);
  border-radius:10px;
  -webkit-transform:translateY(10px);
  -moz-transform:translateY(10px);
  -ms-transform:translateY(10px);
  -o-transform:translateY(10px);
  transform:translateY(10px);
  box-shadow:inset 0px 2px 1px rgba(255, 255, 255, 0.5);
}

#second:active #Third {
  -webkit-animation: moveThird 1s forwards;
  -moz-animation: moveThird 1s forwards;
  -ms-animation: moveThird 1s forwards;
  -o-animation: moveThird 1s forwards;
  animation: moveThird 1s forwards;
}

/********************
Animation Keyframes
********************/

/* This animation for second button (Click me Yellow)*/

@-webkit-keyframes removesecond {
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  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);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}

@-webkit-keyframes movesecond {
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  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);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}

@-moz-keyframes movesecond {
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  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);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}

@-ms-keyframes movesecond {
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  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);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}

@-o-keyframes movesecond {
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  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);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}

@keyframes movesecond {
  0%{-webkit-transform:translateX(-320px) skew(0deg);}
  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);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}

/* This animation for third button ( that's it purple)*/

@-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) ;}
100%{-webkit-transform:translateY(-70px) ;}
}

@-moz-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) ;}
100%{-webkit-transform:translateY(-70px) ;}
}

@-ms-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) ;}
100%{-webkit-transform:translateY(-70px) ;}
}

@-o-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) ;}
100%{-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) ;}
100%{-webkit-transform:translateY(-70px) ;}
}