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