1button {
2  width: 180px;
3  height: 55px;
4  border-radius: 50px;
5  border: solid 4px rgba(255, 255, 255, 0);
6  background-clip: padding-box;
7  box-shadow: 0 4px 20px -2px rgba(39, 94, 254, 0.5);
8  background-color: hsl(241deg 44% 49%);
9  font-size: 20px;
10  letter-spacing: 1px;
11  font-weight: 100;
12  position: relative;
13  cursor: pointer;
14  color: white;
15}
16
17.loading {
18  position: absolute;
19  top: 50%;
20  left: 50%;
21  transform: translate(-50%,-50%);
22  width: 100%;
23  height: 100%;
24  display: flex;
25  align-items: center;
26  justify-content: center;
27  gap: 7px;
28  z-index: 0;
29}
30
31.loading i {
32  width: 5px;
33  height: 5px;
34  background-color: white;
35  display: inline-flex;
36  border-radius: 100%;
37  animation-name: loading5234;
38  animation-iteration-count: infinite;
39  animation-duration: 1s;
40}
41
42@keyframes loading5234 {
43  100% {
44    opacity: 0;
45  }
46}
47
48input:checked + button {
49  transition-delay: 4s;
50  background-color: #31cb20;
51  box-shadow: 0 4px 20px -2px rgb(49 203 32);
52}
53
54.title, .approved {
55  position: absolute;
56  left: 50%;
57  top: 50%;
58  transform: translate(-50%,-50%);
59  width: 100%;
60  display: block;
61  font-size: 15px;
62}
63
64button .title {
65  background-color: hsl(241deg 44% 49%);
66  width: 90%;
67}
68
69input:checked + button .approved {
70  transition-delay: 4s;
71  visibility: visible;
72  opacity: 1;
73  background-color: #31cb20;
74  width: 90%;
75}
76
77input:checked + button .title {
78  visibility: hidden;
79  opacity: 0;
80  transition: all .5s ease;
81}
82
83input:not(:checked) + button .approved {
84  visibility: hidden;
85  opacity: 1;
86}
87
88input {
89  position: absolute;
90  left: 50%;
91  top: 50%;
92  transform: translate(-50%,-50%);
93  z-index: 999;
94  outline: none;
95  width: 210px;
96  height: 60px;
97  border-radius: 50px;
98  margin: 0;
99  opacity: 0;
100  cursor: pointer;
101}
102
103.plane {
104  width: 55px;
105  height: 55px;
106  border-radius: 100%;
107  position: absolute;
108  left: 0;
109  z-index: 9;
110  top: 0;
111  transition: none;
112  background-color: transparent;
113  opacity: 0;
114}
115
116.plane svg {
117  width: 45px;
118  height: 45px;
119  position: absolute;
120  left: 0px;
121  top: 0px;
122  transform: rotate(90deg) translate(-50%,-40%) scale(1);
123  transition: all 0s ease;
124  fill: #3c4a57;
125}
126
127input:checked + button .plane {
128  animation: airplane-route 4s forwards;
129  animation-timing-function: cubic-bezier(0, 0, 0, 0);
130}
131
132@keyframes airplane-route {
133  0% {
134    left: -300px;
135    opacity: 1;
136    transform: scale(2);
137  }
138
139  20% {
140    left: 0px;
141    transform: scale(1);
142    opacity: 1;
143  }
144
145  40% {
146    left: 100%;
147    opacity: 1;
148    transform: translateX(-100%);
149  }
150
151  60% {
152    left: 100%;
153    opacity: 1;
154    transform: translateX(-100%) translateY(-6%) rotate(180deg);
155  }
156
157  80% {
158    left: 0%;
159    opacity: 1;
160    top: -6px;
161    transform: translateX(0%) rotate(180deg);
162  }
163
164  100% {
165    left: 0%;
166    opacity: 1;
167    transform: translateX(0%) rotate(360deg);
168  }
169}
170