Button by ahmed150up2

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 #00ace8;
12  border-radius: 25px;
13  outline: none;
14  overflow: hidden;
15  color: #00ace8;
16  transition: color 0.3s 0.1s ease-out;
17  text-align: center;
18  fill: #00ace8;
19}
20
21button span {
22  margin: 10px;
23}
24
25button::before {
26  position: absolute;
27  top: 0;
28  left: 0;
29  right: 0;
30  bottom: 0;
31  margin: auto;
32  content: '';
33  border-radius: 50%;
34  display: block;
35  width: 20em;
36  height: 20em;
37  left: -5em;
38  text-align: center;
39  transition: box-shadow 0.5s ease-out;
40  z-index: -1;
41}
42
43button:hover {
44  fill: #fff;
45  color: #fff;
46  border: 1px solid #00ace8;
47}
48
49button:hover::before {
50  box-shadow: inset 0 0 0 10em #00ace8;
51}