1.btn {
2  display: inline-block;
3  padding: 10px 20px;
4  border: 2px solid #4a5568;
5  background-color: #4a5568;
6  color: #fff;
7  font-size: 20px;
8  font-weight: bold;
9  text-transform: uppercase;
10  letter-spacing: 0.1em;
11  cursor: pointer;
12  position: relative;
13  overflow: hidden;
14  transition: all 0.3s ease-in-out;
15}
16
17.btn::before {
18  content: '';
19  position: absolute;
20  top: 50%;
21  left: 50%;
22  width: 0;
23  height: 0;
24  background-color: #fff;
25  opacity: 0.2;
26  border-radius: 50%;
27  transform: translate(-50%, -50%);
28  transition: all 0.3s ease-in-out;
29}
30
31.btn:hover {
32  background-color: #fff;
33  color: #4a5568;
34  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
35}
36
37.btn:hover::before {
38  width: 200%;
39  height: 200%;
40}
41