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