1.container-button {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  grid-template-rows: 1fr 1fr;
5  grid-template-areas: "bt-1 bt-2 bt-3"
6    "bt-4 bt-5 bt-6";
7  position: relative;
8  perspective: 800;
9  padding: 0;
10  width: 135px;
11  height: 47px;
12  transition: all 0.3s ease-in-out;
13}
14
15.container-button:active {
16  transform: scale(0.95);
17}
18
19.hover {
20  position: absolute;
21  width: 100%;
22  height: 100%;
23  z-index: 200;
24}
25
26.bt-1 {
27  grid-area: bt-1;
28}
29
30.bt-2 {
31  grid-area: bt-2;
32}
33
34.bt-3 {
35  grid-area: bt-3;
36}
37
38.bt-4 {
39  grid-area: bt-4;
40}
41
42.bt-5 {
43  grid-area: bt-5;
44}
45
46.bt-6 {
47  grid-area: bt-6;
48}
49
50.bt-1:hover ~ button {
51  transform: rotateX(15deg) rotateY(-15deg) rotateZ(0deg);
52  box-shadow: -2px -2px #18181888;
53}
54
55.bt-1:hover ~ button::after {
56  animation: shake 0.5s ease-in-out 0.3s;
57  text-shadow: -2px -2px #18181888;
58}
59
60.bt-3:hover ~ button {
61  transform: rotateX(15deg) rotateY(15deg) rotateZ(0deg);
62  box-shadow: 2px -2px #18181888;
63}
64
65.bt-3:hover ~ button::after {
66  animation: shake 0.5s ease-in-out 0.3s;
67  text-shadow: 2px -2px #18181888;
68}
69
70.bt-4:hover ~ button {
71  transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg);
72  box-shadow: -2px 2px #18181888;
73}
74
75.bt-4:hover ~ button::after {
76  animation: shake 0.5s ease-in-out 0.3s;
77  text-shadow: -2px 2px #18181888;
78}
79
80.bt-6:hover ~ button {
81  transform: rotateX(-15deg) rotateY(15deg) rotateZ(0deg);
82  box-shadow: 2px 2px #18181888;
83}
84
85.bt-6:hover ~ button::after {
86  animation: shake 0.5s ease-in-out 0.3s;
87  text-shadow: 2px 2px #18181888;
88}
89
90.hover:hover ~ button::before {
91  background: transparent;
92}
93
94.hover:hover ~ button::after {
95  content: "Click";
96  top: -150%;
97  transform: translate(-50%, 0);
98  font-size: 34px;
99  color: #f19c2b;
100}
101
102button {
103  position: absolute;
104  padding: 0;
105  width: 135px;
106  height: 47px;
107  background: transparent;
108  font-size: 17px;
109  font-weight: 900;
110  border: 3px solid #f39923;
111  border-radius: 12px;
112  transition: all 0.3s ease-in-out;
113}
114
115button::before {
116  content: "";
117  position: absolute;
118  top: 50%;
119  left: 50%;
120  transform: translate(-50%, -50%);
121  width: 135px;
122  height: 47px;
123  background-color: #f5ae51;
124  border-radius: 12px;
125  transition: all 0.3s ease-in-out;
126  z-index: -1;
127}
128
129button::after {
130  content: "Hover";
131  position: absolute;
132  top: 50%;
133  left: 50%;
134  transform: translate(-50%, -50%);
135  width: 135px;
136  height: 47px;
137  background-color: transparent;
138  font-size: 17px;
139  font-weight: 900;
140  line-height: 47px;
141  color: #ffffff;
142  border: none;
143  border-radius: 12px;
144  transition: all 0.3s ease-in-out;
145  z-index: 2;
146}
147
148@keyframes shake {
149  0% {
150    left: 45%;
151  }
152
153  25% {
154    left: 54%;
155  }
156
157  50% {
158    left: 48%;
159  }
160
161  75% {
162    left: 52%;
163  }
164
165  100% {
166    left: 50%;
167  }
168}