Button by SelfMadeSystem

1.button-container {
2  --background: #fefbff;
3  --inner-shadow: #9faef9;
4  --inner-outline: #34217d;
5  --inner-outline-bottom: #fafcfe;
6  --inner-outline-middle: #8880d5;
7  --inner-outline-outer-top: #fefcff;
8  --inner-outline-outer-bottom-1: #29107b;
9  --line-1: #8676c9;
10  --line-2: #5c69ca;
11  position: relative;
12  background: var(--background);
13  cursor: pointer;
14  transition: all 0.2s;
15  font-size: 17px;
16  padding: 0.7em 1.8em;
17  border-radius: 5px;
18  box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),
19    0px 2px 0px 0px var(--inner-outline-bottom),
20    0px -2px 0px 0px var(--inner-outline),
21    -2px -2px 0px 0px var(--inner-outline),
22    2px -2px 0px 0px var(--inner-outline),
23    0px 0px 0px 6px var(--inner-outline-middle),
24    0px -2px 0px 7px var(--inner-outline-outer-top),
25    0px 4px 0px 7px var(--inner-outline-outer-bottom-1);
26}
27
28.button-lines {
29  display: flex;
30  flex-direction: column;
31  gap: 0.4em;
32}
33
34.button-line-1 {
35  height: 0.2em;
36  width: 4em;
37  border-radius: 10em;
38  display: inline-block;
39  background: var(--line-1);
40}
41
42.button-line-2 {
43  height: 0.2em;
44  width: 3em;
45  border-radius: 10em;
46  display: inline-block;
47  background: var(--line-2);
48}
49