1button {
2  display: flex;
3  align-items: center;
4  padding: .7em 1em;
5  border-radius: 50px;
6  font-family: 'Courier New', Courier, monospace;
7  font-weight: bold;
8  text-transform: uppercase;
9  letter-spacing: 2px;
10  font-size: 16px;
11  text-shadow: 1px 1px 1px rgba(0,212,255, 0.7);
12  color: white;
13  -webkit-transition: .8s;
14  transition: 1s;
15  -webkit-box-shadow: rgba(0,212,255) 0px 0px 50px -15px;
16  box-shadow: rgba(0,212,255) 0px 0px 50px -15px;
17  background: linear-gradient(14deg, rgba(2,0,36, 0.8) 0%, rgba(9,9,121,0.7) 66%, rgba(0,212,255,1) 100%), radial-gradient(circle, rgba(2,0,36, 0.5) 0%, rgba(60,9,121, 0.2) 65%, rgba(0,212,255, 0.9) 100%);
18}
19
20svg {
21  margin-left: 8px;
22  position: relative;
23}
24
25button:hover {
26  -webkit-box-shadow: #222222 0px 0px 4px -2px;
27  box-shadow: #222222 0px 0px 4px -2px;
28}
29
30button:hover svg {
31  -webkit-animation: minibounce .1s infinite alternate;
32  animation: minibounce .1s infinite alternate;
33}
34
35.planet {
36  position: relative;
37  top: -42px;
38}
39
40button:focus {
41  -webkit-animation: shadow 5s;
42  animation: shadow 5s;
43}
44
45button:focus svg {
46  -webkit-animation: launch 2s ease-in-out, fadeOut 2.3s;
47  animation: launch 2s ease-in-out, fadeOut 2.3s;
48}
49
50@-webkit-keyframes minibounce {
51  from {
52    -webkit-transform: translate(-2px, 3px);
53    transform: translate(-2px, 3px);
54  }
55}
56
57@keyframes minibounce {
58  from {
59    -webkit-transform: translate(-2px, 3px);
60    transform: translate(-2px, 3px);
61  }
62}
63
64@-webkit-keyframes launch {
65  from {
66    top: 0%;
67    left: 0%;
68  }
69
70  to {
71    top: 42%;
72    left: 75%;
73  }
74}
75
76@keyframes launch {
77  from {
78    top: 0px;
79    left: 0px;
80  }
81
82  to {
83    top: -40px;
84    left: 60px;
85  }
86}
87
88@-webkit-keyframes fadeOut {
89  0% {
90    opacity: 1;
91  }
92
93  40% {
94    opacity: 1;
95  }
96
97  80% {
98    opacity: 0;
99  }
100
101  90% {
102    opacity: 0;
103  }
104}
105
106@keyframes fadeOut {
107  0% {
108    opacity: 1;
109  }
110
111  40% {
112    opacity: 1;
113  }
114
115  80% {
116    opacity: 0;
117  }
118
119  90% {
120    opacity: 0;
121  }
122}
123
124@-webkit-keyframes shadow {
125  from {
126    -webkit-box-shadow: #222222 0px 0px 4px -2px;
127    box-shadow: #222222 0px 0px 4px -2px;
128  }
129
130  to {
131    -webkit-box-shadow: #51eafd 0px 0px 50px -15px;
132    box-shadow: #51eafd 0px 0px 50px -15px;
133  }
134}
135
136@keyframes shadow {
137  from {
138    -webkit-box-shadow: #222222 0px 0px 4px -2px;
139    box-shadow: #222222 0px 0px 4px -2px;
140  }
141
142  to {
143    -webkit-box-shadow: #51eafd 0px 0px 50px -15px;
144    box-shadow: #51eafd 0px 0px 50px -15px;
145  }
146}
147