1button {
2  font-size: 18px;
3  letter-spacing: 2px;
4  text-transform: uppercase;
5  display: inline-block;
6  text-align: center;
7  font-weight: bold;
8  padding: 0.7em 2em;
9  border: 3px solid #00b7ff;
10  border-radius: 2px;
11  position: relative;
12  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
13  color: #00b7ff;
14  text-decoration: none;
15  transition: 0.3s ease all;
16  z-index: 1;
17}
18
19button:before {
20  transition: 0.5s all ease;
21  position: absolute;
22  top: 0;
23  left: 50%;
24  right: 50%;
25  bottom: 0;
26  opacity: 0;
27  content: '';
28  background-color: #00b7ff;
29  z-index: -1;
30}
31
32button:hover, button:focus {
33  color: white;
34}
35
36button:hover:before, button:focus:before {
37  transition: 0.5s all ease;
38  left: 0;
39  right: 0;
40  opacity: 1;
41}
42
43button:active {
44  transform: scale(0.9);
45}