1.cta {
2  display: flex;
3  padding: 11px 33px;
4  text-decoration: none;
5  font-family: 'Poppins', sans-serif;
6  font-size: 25px;
7  color: white;
8  background: #6225E6;
9  transition: 1s;
10  box-shadow: 6px 6px 0 black;
11  transform: skewX(-15deg);
12  border: none;
13}
14
15.cta:focus {
16  outline: none;
17}
18
19.cta:hover {
20  transition: 0.5s;
21  box-shadow: 10px 10px 0 #FBC638;
22}
23
24.cta .second {
25  transition: 0.5s;
26  margin-right: 0px;
27}
28
29.cta:hover  .second {
30  transition: 0.5s;
31  margin-right: 45px;
32}
33
34.span {
35  transform: skewX(15deg)
36}
37
38.second {
39  width: 20px;
40  margin-left: 30px;
41  position: relative;
42  top: 12%;
43}
44
45.one {
46  transition: 0.4s;
47  transform: translateX(-60%);
48}
49
50.two {
51  transition: 0.5s;
52  transform: translateX(-30%);
53}
54
55.cta:hover .three {
56  animation: color_anim 1s infinite 0.2s;
57}
58
59.cta:hover .one {
60  transform: translateX(0%);
61  animation: color_anim 1s infinite 0.6s;
62}
63
64.cta:hover .two {
65  transform: translateX(0%);
66  animation: color_anim 1s infinite 0.4s;
67}
68
69@keyframes color_anim {
70  0% {
71    fill: white;
72  }
73
74  50% {
75    fill: #FBC638;
76  }
77
78  100% {
79    fill: white;
80  }
81}