1button {
2 padding: 10px 40px;
3 font-size: 18px;
4 background-color: #008542;
5 color: #fff;
6 text-shadow: 0 2px 0 rgb(0 0 0 / 25%);
7 display: inline-flex;
8 align-items: center;
9 justify-content: center;
10 position: relative;
11 border: 0;
12 z-index: 1;
13 user-select: none;
14 cursor: pointer;
15 text-transform: uppercase;
16 letter-spacing: 1px;
17 white-space: unset;
18 padding: .8rem 1.5rem;
19 text-decoration: none;
20 font-weight: 900;
21 transition: all 0.7s cubic-bezier(0,.8,.26,.99);
22}
23
24button:before {
25 position: absolute;
26 pointer-events: none;
27 top: 0;
28 left: 0;
29 display: block;
30 width: 100%;
31 height: 100%;
32 content: '';
33 transition: .7s cubic-bezier(0,.8,.26,.99);
34 z-index: -1;
35 background-color: #008542!important;
36 box-shadow: 0 -4px rgb(21 108 0 / 50%) inset, 0 4px rgb(100 253 31 / 99%) inset, -4px 0 rgb(100 253 31 / 50%) inset, 4px 0 rgb(21 108 0 / 50%) inset;
37}
38
39button:after {
40 position: absolute;
41 pointer-events: none;
42 top: 0;
43 left: 0;
44 display: block;
45 width: 100%;
46 height: 100%;
47 content: '';
48 box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);
49 transition: .7s cubic-bezier(0,.8,.26,.99);
50}
51
52button:hover:before {
53 box-shadow: 0 -4px rgb(0 0 0 / 50%) inset, 0 4px rgb(255 255 255 / 20%) inset, -4px 0 rgb(255 255 255 / 20%) inset, 4px 0 rgb(0 0 0 / 50%) inset;
54}
55
56button:hover:after {
57 box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);
58}
59
60button:active {
61 transform: translateY(4px);
62}
63
64button:active:after {
65 box-shadow: 0 0px 0 0 rgb(0 0 0 / 15%);
66}