1.btn {
2 display: block;
3 padding: 0.7em 1em;
4 background: transparent;
5 outline: none;
6 border: 0;
7 color: #d4af37;
8 letter-spacing: 0.1em;
9 font-family: monospace;
10 font-size: 17px;
11 font-weight: bold;
12 z-index: 1;
13}
14
15.cube {
16 position: relative;
17 transition: all 0.5s;
18}
19
20.cube .bg-top {
21 position: absolute;
22 height: 10px;
23 background: #d4af37;
24 bottom: 100%;
25 left: 5px;
26 right: -5px;
27 transform: skew(-45deg, 0);
28 margin: 0;
29 transition: all 0.4s;
30}
31
32.cube .bg-top .bg-inner {
33 bottom: 0;
34}
35
36.cube .bg {
37 position: absolute;
38 left: 0;
39 bottom: 0;
40 top: 0;
41 right: 0;
42 background: #d4af37;
43 transition: all 0.4s;
44}
45
46.cube .bg-right {
47 position: absolute;
48 background: #d4af37;
49 top: -5px;
50 z-index: 0;
51 bottom: 5px;
52 width: 10px;
53 left: 100%;
54 transform: skew(0, -45deg);
55 transition: all 0.4s;
56}
57
58.cube .bg-right .bg-inner {
59 left: 0;
60}
61
62.cube .bg-inner {
63 background: #28282d;
64 position: absolute;
65 left: 2px;
66 right: 2px;
67 top: 2px;
68 bottom: 2px;
69}
70
71.cube .text {
72 position: relative;
73 transition: all 0.4s;
74}
75
76.cube:hover .bg-inner {
77 background: #d4af37;
78 transition: all 0.4s;
79}
80
81.cube:hover .text {
82 color: #28282d;
83 transition: all 0.4s;
84}
85
86.cube:hover .bg-right,
87.cube:hover .bg,
88.cube:hover .bg-top {
89 background: #28282d;
90}
91
92.cube:active {
93 z-index: 9999;
94 animation: bounce .1s linear;
95}
96
97@keyframes bounce {
98 50% {
99  transform: scale(0.9);
100 }
101}