1button {
2 --glow-color: rgb(217, 176, 255);
3 --glow-spread-color: rgba(191, 123, 255, 0.781);
4 --enhanced-glow-color: rgb(231, 206, 255);
5 --btn-color: rgb(100, 61, 136);
6 border: .25em solid var(--glow-color);
7 padding: 1em 3em;
8 color: var(--glow-color);
9 font-size: 15px;
10 font-weight: bold;
11 background-color: var(--btn-color);
12 border-radius: 1em;
13 outline: none;
14 box-shadow: 0 0 1em .25em var(--glow-color),
15        0 0 4em 1em var(--glow-spread-color),
16        inset 0 0 .75em .25em var(--glow-color);
17 text-shadow: 0 0 .5em var(--glow-color);
18 position: relative;
19 transition: all 0.3s;
20}
21
22button::after {
23 pointer-events: none;
24 content: "";
25 position: absolute;
26 top: 120%;
27 left: 0;
28 height: 100%;
29 width: 100%;
30 background-color: var(--glow-spread-color);
31 filter: blur(2em);
32 opacity: .7;
33 transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
34}
35
36button:hover {
37 color: var(--btn-color);
38 background-color: var(--glow-color);
39 box-shadow: 0 0 1em .25em var(--glow-color),
40        0 0 4em 2em var(--glow-spread-color),
41        inset 0 0 .75em .25em var(--glow-color);
42}
43
44button:active {
45 box-shadow: 0 0 0.6em .25em var(--glow-color),
46        0 0 2.5em 2em var(--glow-spread-color),
47        inset 0 0 .5em .25em var(--glow-color);
48}