1button {
2  transform: rotate(-25deg) skew(25deg);
3  transform-style: preserve-3d;
4  position: relative;
5  list-style: none;
6  width: 100px;
7  height: 32px;
8  border: none;
9  background: transparent;
10  font-family: inherit;
11}
12
13button:before {
14  content: '';
15  position: absolute;
16  bottom: -10px;
17  left: -5px;
18  width: 100%;
19  height: 10px;
20  background: #2a2a2a;
21  transform: skewX(-41deg);
22}
23
24button:after {
25  content: '';
26  position: absolute;
27  top: 5px;
28  left: -9px;
29  width: 9px;
30  height: 100%;
31  background: #2a2a2a;
32  transform: skewY(-49deg);
33}
34
35button span {
36  position: absolute;
37  top: 0;
38  left: 0;
39  width: 100%;
40  height: 100%;
41  background: #2a2a2a;
42  color: #fff;
43  font-size: 25px;
44  transition: 1.1s ease-out;
45}
46
47button:hover span {
48  z-index: 1000;
49  transition: .3s;
50  color: #fff;
51}
52
53button:hover span:nth-child(5) {
54  transform: translate(40px, -40px);
55  opacity: 1;
56}
57
58button:hover span:nth-child(4) {
59  transform: translate(30px, -30px);
60  opacity: .8;
61}
62
63button:hover span:nth-child(3) {
64  transform: translate(20px, -20px);
65  opacity: .6;
66}
67
68button:hover span:nth-child(2) {
69  transform: translate(10px, -10px);
70  opacity: .4;
71}
72
73button:hover span:nth-child(1) {
74  transform: translate(0px, 0px);
75  opacity: .2;
76}
77
78button:active span:nth-child(5) {
79  transform: translate(20px, -20px);
80  opacity: 1;
81}
82
83button:active span:nth-child(4) {
84  transform: translate(15px, -15px);
85}
86
87button:active span:nth-child(3) {
88  transform: translate(10px, -10px);
89}
90
91button:active span:nth-child(2) {
92  transform: translate(5px, -5px);
93}
94
95button:active span:nth-child(1) {
96  transform: translate(0px, 0px);
97}
98
99button:nth-child(1):hover span {
100  background: #52E19F;
101}