1button {
2  padding: 15px 30px 15px 50px;
3  background: #181c35;
4  border-radius: 30px;
5  display: flex;
6  position: relative;
7  color: #fff;
8  font-weight: 400;
9  overflow: hidden;
10  transition: all ease-in-out .5s;
11  border: #ffffff56 solid 1px;
12  box-shadow: #51eafd 0px 0px 50px -15px;
13}
14
15button:before {
16  content: "";
17  width: 100%;
18  height: 100%;
19  position: absolute;
20  top: -90%;
21  left: -90%;
22  filter: blur(20px);
23  background: #a11ee3;
24}
25
26button:after {
27  content: "";
28  width: 100%;
29  height: 100%;
30  position: absolute;
31  bottom: -90%;
32  right: -90%;
33  filter: blur(20px);
34  background: #51eafd;
35}
36
37button .icon {
38  transform: scale(0.07);
39  width: 20px;
40  height: 20px;
41  position: absolute;
42  left: 14px;
43  top: 2px;
44  transition: all ease-in-out .5s;
45  z-index: 9;
46  rotate: 45deg
47}
48
49button .icon path {
50  fill: #fff;
51}
52
53button .launch {
54  background: fff;
55  background: #fff;
56  width: 300px;
57  height: 300px;
58  rotate: 45deg;
59  position: absolute;
60  left: -9px;
61  top: 550%;
62  z-index: 0;
63  transform: translateX(-56%);
64  transition: all ease-in-out 1s;
65}
66
67button .text {
68  z-index: 9;
69  transition: all ease-in-out .3s;
70}
71
72button:hover .icon {
73  transform: scale(0.07);
74  animation: shake_341 2s infinite;
75  top: 5px;
76  left: 8px;
77  rotate: 0deg;
78}
79
80button:active {
81  transform: scale(0.7);
82}
83
84button:hover {
85  box-shadow: 0px 0px 0px 10px #00000017;
86}
87
88button:focus {
89  color: #464646;
90}
91
92button:focus .icon {
93  transform: scale(0.07);
94  animation: launch_341 2s alternate;
95}
96
97button:focus .icon path {
98  animation: fill_341 2s linear;
99  animation-fill-mode: forwards;
100}
101
102button:focus .launch {
103  top: -90%;
104}
105
106@keyframes shake_341 {
107  10%, 90% {
108    transform: scale(0.07) translate3d(-6px, 0, 0);
109  }
110
111  20%, 80% {
112    transform: scale(0.07)  translate3d(7px, 0, 0);
113  }
114
115  30%, 50%, 70% {
116    transform: scale(0.07)  translate3d(-9px, 0, 0);
117  }
118
119  40%, 60% {
120    transform: scale(0.07)  translate3d(9px, 0, 0);
121  }
122}
123
124@keyframes launch_341 {
125  0% {
126    top: 0px;
127    opacity: 1;
128  }
129
130  20% {
131    top: -100%;
132    opacity: 1;
133  }
134
135  20.5% {
136    opacity: 0;
137  }
138
139  24% {
140    opacity: 0;
141    top: 100%;
142  }
143
144  25% {
145    opacity: 1;
146  }
147
148  100% {
149    top: 6px;
150  }
151}
152
153@keyframes fill_341 {
154  0% {
155    fill: #fff;
156  }
157
158  20% {
159    fill: #fff;
160  }
161
162  20.5% {
163    opacity: 0;
164  }
165
166  100% {
167    fill: #464646;
168  }
169}