1button {
2 --color: #560bad;
3 font-family: inherit;
4 display: inline-block;
5 width: 8em;
6 height: 2.6em;
7 line-height: 2.5em;
8 margin: 20px;
9 position: relative;
10 overflow: hidden;
11 border: 2px solid var(--color);
12 transition: color .5s;
13 z-index: 1;
14 font-size: 17px;
15 border-radius: 6px;
16 font-weight: 500;
17 color: var(--color);
18}
19
20button:before {
21 content: "";
22 position: absolute;
23 z-index: -1;
24 background: var(--color);
25 height: 150px;
26 width: 200px;
27 border-radius: 50%;
28}
29
30button:hover {
31 color: #fff;
32}
33
34button:before {
35 top: 100%;
36 left: 100%;
37 transition: all .7s;
38}
39
40button:hover:before {
41 top: -30px;
42 left: -30px;
43}
44
45button:active:before {
46 background: #3a0ca3;
47 transition: background 0s;
48}