Button by SelfMadeSystem

1.button {
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  --inner-outline-outer-bottom-2: #5b42c4;
10  --inner-outline-outer-bottom-3: #200265;
11  --line-1: #8676c9;
12  --line-2: #5c69ca;
13  display: flex;
14  gap: 0.4em;
15  align-items: center;
16  padding: 0.6em 0.8em;
17  transition: all 0.3s;
18  background: var(--background);
19  border-radius: 0.7em;
20
21  box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),
22    0px 2px 0px 0px var(--inner-outline-bottom),
23    0px -2px 0px 0px var(--inner-outline),
24    -2px -2px 0px 0px var(--inner-outline),
25    2px -2px 0px 0px var(--inner-outline),
26    0px 0px 0px 6px var(--inner-outline-middle),
27    0px -2px 0px 7px var(--inner-outline-outer-top),
28    0px 4px 0px 7px var(--inner-outline-outer-bottom-1),
29    0px 7px 0px 7px var(--inner-outline-outer-bottom-2),
30    0px 10px 0px 7px var(--inner-outline-outer-bottom-3);
31}
32
33.button-icon {
34  display: inline-block;
35  vertical-align: top;
36  width: 1.5em;
37}
38
39.button-icon path {
40  stroke-width: 2px;
41  stroke: var(--inner-outline);
42  stroke-linejoin: round;
43}
44
45.button-lines {
46  display: flex;
47  flex-direction: column;
48  gap: 0.4em;
49}
50
51.button-line-1 {
52  height: 0.2em;
53  width: 4em;
54  border-radius: 10em;
55  display: inline-block;
56  background: var(--line-1);
57}
58
59.button-line-2 {
60  height: 0.2em;
61  width: 3em;
62  border-radius: 10em;
63  display: inline-block;
64  background: var(--line-2);
65}
66