1.btn {
2  --color1: #1a8516;
3  --color2: #236b19;
4  perspective: 1000px;
5  padding: 1em 1em;
6  background: linear-gradient(var(--color1), var(--color2));
7  border: none;
8  outline: none;
9  font-size: 20px;
10  text-transform: uppercase;
11  letter-spacing: 4px;
12  color: #fff;
13  text-shadow: 0 10px 10px #000;
14  cursor: pointer;
15  transform: rotateX(70deg) rotateZ(30deg);
16  transform-style: preserve-3d;
17  transition: transform 0.5s;
18}
19
20.btn::before {
21  content: "";
22  width: 100%;
23  height: 15px;
24  background-color: var(--color2);
25  position: absolute;
26  bottom: 0;
27  right: 0;
28  transform: rotateX(90deg);
29  transform-origin: bottom;
30}
31
32.btn::after {
33  content: "";
34  width: 15px;
35  height: 100%;
36  background-color: var(--color1);
37  position: absolute;
38  top: 0;
39  right: 0;
40  transform: rotateY(-90deg);
41  transform-origin: right;
42}
43
44.btn:hover {
45  transform: rotateX(30deg) rotateZ(0);
46}
47