1.button {
2 --color: #00A97F;
3 padding: 0.8em 1.7em;
4 background-color: transparent;
5 border-radius: .3em;
6 position: relative;
7 overflow: hidden;
8 cursor: pointer;
9 transition: .5s;
10 font-weight: 400;
11 font-size: 17px;
12 border: 1px solid;
13 font-family: inherit;
14 text-transform: uppercase;
15 color: var(--color);
16 z-index: 1;
17}
18
19.button::before, .button::after {
20 content: '';
21 display: block;
22 width: 50px;
23 height: 50px;
24 transform: translate(-50%, -50%);
25 position: absolute;
26 border-radius: 50%;
27 z-index: -1;
28 background-color: var(--color);
29 transition: 1s ease;
30}
31
32.button::before {
33 top: -1em;
34 left: -1em;
35}
36
37.button::after {
38 left: calc(100% + 1em);
39 top: calc(100% + 1em);
40}
41
42.button:hover::before, .button:hover::after {
43 height: 410px;
44 width: 410px;
45}
46
47.button:hover {
48 color: rgb(10, 25, 30);
49}
50
51.button:active {
52 filter: brightness(.8);
53}
54