Button by adamgiebl

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: #fff;
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  opacity: .8;
62}
63
64button:hover span:nth-child(3) {
65  transform: translate(20px, -20px);
66  opacity: .6;
67}
68
69button:hover span:nth-child(2) {
70  transform: translate(10px, -10px);
71  opacity: .4;
72}
73
74button:hover span:nth-child(1) {
75  transform: translate(0px, 0px);
76  opacity: .2;
77}
78
79button:active span:nth-child(5) {
80  transform: translate(20px, -20px);
81  opacity: 1;
82}
83
84button:active span:nth-child(4) {
85  transform: translate(15px, -15px);
86}
87
88button:active span:nth-child(3) {
89  transform: translate(10px, -10px);
90}
91
92button:active span:nth-child(2) {
93  transform: translate(5px, -5px);
94}
95
96button:active span:nth-child(1) {
97  transform: translate(0px, 0px);
98}
99
100button:nth-child(1):hover span {
101  background: #52E19F;
102}