1.active {
2  opacity: 0;
3  position: absolute;
4}
5
6.btn {
7  all: unset;
8  background: rgb(25,24,37);
9  background: linear-gradient(123deg, rgba(25,24,37,1) 0%, rgba(48,30,103,1) 51%, rgba(134,93,255,1) 82%, rgba(227,132,255,1) 100%);
10  padding: 0.55em 0.15em 0.55em 1em;
11  display: -webkit-box;
12  display: -ms-flexbox;
13  display: flex;
14  border-radius: 0.5em;
15}
16
17.btn:hover {
18  -webkit-box-shadow: -1px -1px 53px -15px rgba(255,255,255,0.75);
19  box-shadow: -1px -1px 53px -15px rgba(255,255,255,0.75);
20}
21
22.btn:hover > .default {
23  opacity: 0;
24  position: absolute;
25}
26
27.btn:hover > .active {
28  opacity: 1;
29  position: relative;
30  -webkit-transition-delay: .4s;
31  transition-delay: .4s;
32}
33
34.btn:hover .spaceship1 {
35  opacity: 0;
36}
37
38.btn:hover .spaceship2 {
39  opacity: 0;
40}
41
42.btn:hover + .spaceship3 {
43  opacity: 1;
44}
45
46.btn:hover::after {
47  -webkit-animation: none;
48  animation: none;
49  display: none;
50}
51
52.btn::after {
53  content: '';
54  position: absolute;
55  border: 3px solid white;
56  border-radius: 0.5em;
57  top: 43%;
58  left: 50%;
59  z-index: -1;
60  -webkit-transform: translate(-50%, -50%);
61  -ms-transform: translate(-50%, -50%);
62  transform: translate(-50%, -50%);
63  -webkit-animation-duration: 2s;
64  animation-duration: 2s;
65  -webkit-animation-delay: 5s;
66  animation-delay: 5s;
67  -webkit-animation-name: halo;
68  animation-name: halo;
69  -webkit-animation-iteration-count: infinite;
70  animation-iteration-count: infinite;
71}
72
73.btn:active + .spaceship3 {
74  -webkit-animation: lauch 1s ease-in forwards;
75  animation: lauch 1s ease-in forwards;
76}
77
78.btn-text {
79  color: white;
80  font-weight: bold;
81  letter-spacing: 0.6em;
82  display: -webkit-box;
83  display: -ms-flexbox;
84  display: flex;
85  -webkit-box-pack: center;
86  -ms-flex-pack: center;
87  justify-content: center;
88  -webkit-box-align: center;
89  -ms-flex-align: center;
90  align-items: center;
91  -webkit-transition: .4s ease-in-out;
92  transition: .4s ease-in-out;
93}
94
95.spaceship1 {
96  position: relative;
97  z-index: 2;
98  left: 1em;
99  bottom: 0.8em;
100  -webkit-animation: 10s float infinite;
101  animation: 10s float infinite;
102}
103
104.spaceship2 {
105  position: relative;
106  z-index: 2;
107  left: -14em;
108  top: 1.5em;
109  -webkit-animation: 7s float infinite;
110  animation: 7s float infinite;
111}
112
113.spaceship3 {
114  opacity: 0;
115  position: relative;
116  z-index: -1;
117  top: -4.7em;
118  left: 5.8em;
119}
120
121@keyframes float {
122  0% {
123    -webkit-transform: translatey(0px);
124    transform: translatey(0px);
125  }
126
127  50% {
128    -webkit-transform: translatey(-10px);
129    transform: translatey(-10px);
130  }
131
132  100% {
133    -webkit-transform: translatey(0px);
134    transform: translatey(0px);
135  }
136}
137
138@keyframes halo {
139  from {
140    opacity: 0.2;
141    width: 0em;
142    height: 0em;
143  }
144
145  to {
146    opacity: 0;
147    width: 23em;
148    height: 3.55em;
149  }
150}
151
152@keyframes lauch {
153  from {
154    -webkit-transform: translatey(0px);
155    transform: translatey(0px);
156    opacity: 1;
157  }
158
159  to {
160    -webkit-transform: translatey(-110px);
161    transform: translatey(-110px);
162    opacity: 0;
163  }
164}