Button by escannord

1.button {
2  cursor: pointer;
3  position: relative;
4  display: inline-block;
5  transform-style: preserve-3d;
6  transform: rotateX(-45deg) rotateY(25deg) rotateZ(0deg);
7  background-color: transparent;
8  border: none;
9}
10
11.lid {
12  position: absolute;
13  transform-style: preserve-3d;
14  transition: all 1s ease-in-out;
15  transform-origin: 0 80px -120px;
16  height: 80px;
17  width: 250px;
18  background-color: rgba(0, 0, 0, 0);
19  top: 50%;
20  left: 50%;
21  transform: translate(-50%, -50%);
22}
23
24.lid:hover,
25.button:hover .lid {
26  transform: translate(-50%, -50%) rotateX(60deg);
27}
28
29.lid .side {
30  display: inline-block;
31  width: 250px;
32  height: 250px;
33  background-color: rgba(63, 112, 141, 0.308);
34  position: absolute;
35  top: 50%;
36  left: 50%;
37  border: solid 1px rgba(0, 132, 255, 0.226);
38}
39.front {
40  transform: translate(-50%, -50%) translateZ(125px);
41  height: 80px !important;
42}
43.top {
44  transform: translate(-50%, -50%) rotateX(90deg) translateZ(40px);
45  background-color: rgba(167, 47, 10, 0.438);
46}
47.left {
48  transform: translate(-50%, -50%) rotateY(90deg) translateZ(125px);
49  height: 80px !important;
50}
51
52.right {
53  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(125px);
54  height: 80px !important;
55}
56
57.back {
58  transform: translate(-50%, -50%) rotateY(180deg) translateZ(125px);
59  background-color: rgba(250, 234, 18, 0.418);
60  height: 80px !important;
61}
62
63.back::before {
64  content: "";
65  display: inline-block;
66  position: absolute;
67  width: 20px;
68  height: 10px;
69  background-color: black;
70  bottom: 0;
71  left: 10px;
72}
73
74.back::after {
75  content: "";
76  display: inline-block;
77  position: absolute;
78  width: 20px;
79  height: 10px;
80  background-color: black;
81  bottom: 0;
82  right: 10px;
83}
84
85.panels {
86  position: absolute;
87  top: 50%;
88  left: 50%;
89  transform: translate(-50%, -50%) rotateX(90deg) translateZ(-40px);
90}
91
92.panel-1 {
93  display: inline-block;
94  position: absolute;
95  top: 50%;
96  left: 50%;
97  transform: translate(-50%, -50%);
98  height: 250px;
99  width: 250px;
100  background-color: rgb(166, 255, 0);
101  background: repeating-linear-gradient(
102    45deg,
103    rgb(247, 243, 33) 0% 2%,
104    black 2% 4%
105  );
106  box-shadow: 0px 0px 0px 20px red;
107}
108
109.panel-2 {
110  display: inline-block;
111  position: absolute;
112  top: 50%;
113  left: 50%;
114  transform: translate(-50%, -50%);
115  height: 200px;
116  width: 200px;
117  background-color: rgb(0, 0, 0);
118  background: linear-gradient(-135deg, rgb(43, 42, 42), black);
119  border: solid 5px rgb(247, 243, 33);
120}
121
122.panel-1::after {
123  content: "SELF-DESTRUCT";
124  display: inline-block;
125  position: absolute;
126  top: 50%;
127  left: 50%;
128  width: 290px;
129  height: 25px;
130  color: white;
131  font-weight: bold;
132  transform: translate(-50%, -50%) translateY(170px);
133  font-size: larger;
134  background-color: red;
135}
136
137.panel-1::before {
138  content: "WARNING: DANGER";
139  display: inline-block;
140  position: absolute;
141  top: 50%;
142  left: 50%;
143  width: 290px;
144  height: 25px;
145  color: white;
146  font-weight: bold;
147  transform: translate(-50%, -50%) rotateZ(90deg) translateY(170px);
148  font-size: larger;
149  background-color: red;
150}
151
152.btn-trigger {
153  position: absolute;
154  top: 50%;
155  right: 50%;
156  transform: translate(-50%, -50%);
157}
158
159.btn-trigger-1 {
160  position: absolute;
161  top: 50%;
162  left: 50%;
163  width: 100px;
164  height: 100px;
165  background-color: rgb(207, 195, 195);
166  box-shadow: -0px 1px 0 rgb(54, 54, 54), -0px 2px 0 rgb(54, 54, 54),
167    -1px 3px 0 rgb(54, 54, 54), -1px 4px 0 rgb(54, 54, 54),
168    -2px 5px 0 rgb(54, 54, 54), -2px 6px 0 rgb(54, 54, 54),
169    -3px 7px 0 rgb(54, 54, 54), -3px 8px 0 rgb(54, 54, 54),
170    -4px 9px 0 rgb(54, 54, 54), -4px 10px 0 rgb(54, 54, 54),
171    -5px 11px 0 rgb(54, 54, 54), -5px 12px 0 rgb(54, 54, 54),
172    -6px 13px 0 rgb(54, 54, 54), -6px 14px 0 rgb(54, 54, 54),
173    -7px 15px 0 rgb(54, 54, 54), -7px 16px 0 rgb(54, 54, 54),
174    -8px 17px 0 rgb(54, 54, 54), -8px 18px 0 rgb(54, 54, 54),
175    -9px 19px 0 rgb(54, 54, 54), -9px 20px 0 rgb(54, 54, 54),
176    -10px 21px 0 rgb(54, 54, 54), -10px 22px 0 rgb(54, 54, 54),
177    -11px 23px 0 rgb(54, 54, 54), -11px 24px 0 rgb(54, 54, 54),
178    -12px 25px 0 rgb(54, 54, 54), -12px 26px 0 rgb(54, 54, 54);
179  border-radius: 50%;
180  transform: translate(-50%, -50%) translateZ(50px);
181}
182
183.btn-trigger-2 {
184  position: absolute;
185  width: 80px;
186  height: 80px;
187  background-color: rgb(241, 17, 17);
188  box-shadow: -0px 1px 0 rgb(128, 5, 5), -0px 2px 0 rgb(128, 5, 5),
189    -1px 3px 0 rgb(128, 5, 5), -1px 4px 0 rgb(128, 5, 5),
190    -2px 5px 0 rgb(128, 5, 5), -2px 6px 0 rgb(128, 5, 5),
191    -3px 7px 0 rgb(128, 5, 5), -3px 8px 0 rgb(128, 5, 5),
192    -4px 9px 0 rgb(128, 5, 5), -4px 10px 0 rgb(128, 5, 5),
193    -5px 11px 0 rgb(128, 5, 5), -5px 12px 0 rgb(128, 5, 5),
194    -6px 13px 0 rgb(128, 5, 5), -6px 14px 0 rgb(128, 5, 5),
195    -7px 15px 0 rgb(128, 5, 5), -7px 16px 0 rgb(128, 5, 5);
196  border-radius: 50%;
197  transition: all 0.3s;
198  transform: translate(-40%, -70%) translateZ(100px);
199}
200
201.btn-trigger-2:active {
202  transform: translate(-50%, -50%) translateZ(100px);
203  box-shadow: none;
204}
205
206@keyframes rotate {
207  100% {
208    transform: rotateX(360deg);
209  }
210}
211