1button {
2  background: transparent;
3  position: relative;
4  padding: 5px 15px;
5  display: flex;
6  align-items: center;
7  font-size: 17px;
8  font-weight: 600;
9  text-decoration: none;
10  cursor: pointer;
11  border: 1px solid #0163E0;
12  border-radius: 25px;
13  outline: none;
14  overflow: hidden;
15  color: #0163E0;
16  transition: color 0.3s 0.1s ease-out;
17  text-align: center;
18}
19
20button svg {
21  fill: #0163E0;
22  height: 25px;
23  width: 25px;
24}
25
26button span {
27  margin: 10px;
28}
29
30button::before {
31  position: absolute;
32  top: 0;
33  left: 0;
34  right: 0;
35  bottom: 0;
36  margin: auto;
37  content: '';
38  border-radius: 50%;
39  display: block;
40  width: 20em;
41  height: 20em;
42  left: -5em;
43  text-align: center;
44  transition: box-shadow 0.5s ease-out;
45  z-index: -1;
46}
47
48button:hover {
49  color: #fff;
50  border: 1px solid #0163E0;
51}
52
53button:hover svg {
54  fill: currentColor;
55}
56
57button:hover::before {
58  box-shadow: inset 0 0 0 10em #0163E0;
59}