Button by eslam-hany

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 mediumturquoise;
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: mediumturquoise;
14  text-decoration: none;
15  transition: 0.3s ease all;
16  z-index: 1;
17  cursor: pointer;
18}
19
20button:before {
21  transition: 0.5s all ease;
22  position: absolute;
23  top: 0;
24  left: 50%;
25  right: 50%;
26  bottom: 0;
27  opacity: 0;
28  content: '';
29  background-color: lightblue;
30  z-index: -1;
31}
32
33button:hover, button:focus {
34  color: white;
35}
36
37button:hover:before, button:focus:before {
38  transition: 0.5s all ease;
39  left: 0;
40  right: 0;
41  opacity: 1;
42}
43
44button:active {
45  transform: scale(0.9);
46}