Button by JaydipPrajapati1910

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