Button by Randdose

1.button {
2  all: unset;
3  display: flex;
4  align-items: center;
5  position: relative;
6  padding: 0.6em 2em;
7  border: mediumspringgreen solid 0.15em;
8  border-radius: 0.25em;
9  color: mediumspringgreen;
10  font-size: 1.5em;
11  font-weight: 600;
12  cursor: pointer;
13  overflow: hidden;
14  transition: border 300ms, color 300ms;
15  user-select: none;
16}
17
18.button p {
19  z-index: 1;
20}
21
22.button:hover {
23  color: #212121;
24}
25
26.button:active {
27  border-color: teal;
28}
29
30.button::after, .button::before {
31  content: "";
32  position: absolute;
33  width: 9em;
34  aspect-ratio: 1;
35  background: mediumspringgreen;
36  opacity: 50%;
37  border-radius: 50%;
38  transition: transform 500ms, background 300ms;
39}
40
41.button::before {
42  left: 0;
43  transform: translateX(-8em);
44}
45
46.button::after {
47  right: 0;
48  transform: translateX(8em);
49}
50
51.button:hover:before {
52  transform: translateX(-1em);
53}
54
55.button:hover:after {
56  transform: translateX(1em);
57}
58
59.button:active:before,
60.button:active:after {
61  background: teal;
62}