Button by Jerome-W-90

1.box {
2  position: absolute;
3  left: 50%;
4  top: 50%;
5  transform: translate(-50%, -50%) skew(15deg);
6  width: 250px;
7  height: 250px;
8}
9.box .container {
10  width: 250px;
11  height: 250px;
12  background: #2f0000;
13  border-radius: 15px;
14  border: 10px solid #cbcdcd;
15  display: flex;
16  flex-wrap: wrap;
17  gap: 0.5px;
18}
19.box .container .button {
20  position: relative;
21  flex-basis: calc(50% - 0.5px);
22  background: #ca0a0b;
23  border: 0;
24  font-size: 35px;
25  border-radius: 5px;
26  color: white;
27  cursor: pointer;
28  transition: all 0.5s ease;
29}
30.box .container .button::before {
31  content: "";
32  position: absolute;
33  width: 94px;
34  height: 94px;
35  border-radius: 100%;
36  left: 50%;
37  top: 50%;
38  transform: translate(-50%, -50%);
39  background: rgb(229, 136, 137);
40  background: linear-gradient(
41    133deg,
42    rgba(229, 136, 137, 1) 0%,
43    rgba(229, 136, 137, 1) 15%,
44    rgba(209, 13, 12, 1) 20%,
45    rgba(209, 13, 12, 1) 65%,
46    rgba(97, 4, 3, 1) 100%
47  );
48}
49.box .container .button::after {
50  content: "";
51  position: absolute;
52  width: 100%;
53  height: 0;
54  background: rgb(80, 8, 8);
55  background: linear-gradient(
56    90deg,
57    #4c0405 1%,
58    rgb(202, 10, 11) 5%,
59    rgb(199, 39, 39) 45%,
60    #d88180 100%
61  );
62  left: 0;
63  bottom: 0;
64  transform: skewY(0deg) skewX(-40deg);
65  z-index: -4;
66  transition: all 0.5s ease;
67}
68.box .container .button:hover::after {
69  height: 13px;
70  bottom: -12px;
71  left: -7px;
72}
73.box .container .button span {
74  position: absolute;
75  z-index: 1;
76  left: 50%;
77  top: 50%;
78  transform: translate(-50%, -50%);
79}
80.box .container .button:hover {
81  transform: translate(12px, -12px);
82  box-shadow: -30px 10px 26px -5px black, -12px 12px 0 0 #ca0a0b,
83    -11px 11px 0 0 #ca0a0b, -10px 10px 0 0 #ca0a0b, -9px 9px 0 0 #ca0a0b,
84    -8px 8px 0 0 #ca0a0b, -7px 7px 0 0 #ca0a0b, -6px 6px 0 0 #ca0a0b,
85    -5px 5px 0 0 #ca0a0b, -4px 4px 0 0 #ca0a0b, -3px 3px 0 0 #ca0a0b,
86    -2px 2px 0 0 #ca0a0b, -1px 1px 0 0 #ca0a0b;
87  z-index: 999;
88}
89.box::before {
90  content: "";
91  width: calc(100% + 25px);
92  height: calc(100% + 10px);
93  position: absolute;
94  left: -25px;
95  top: 35px;
96  background: rgb(100, 104, 106);
97  background: linear-gradient(
98    135deg,
99    rgba(100, 104, 106, 1) 0%,
100    rgba(100, 104, 106, 1) 45%,
101    rgba(222, 221, 221, 1) 55%,
102    rgba(222, 221, 221, 1) 100%
103  );
104  z-index: -1;
105  border-radius: 15px;
106}
107.box::after {
108  content: "";
109  width: 30px;
110  height: 45px;
111  position: absolute;
112  left: -14px;
113  top: 12px;
114  background: rgba(100, 104, 106, 1);
115  z-index: -1;
116  transform: rotate(215deg);
117}
118.box .container::before {
119  content: "";
120  width: 30px;
121  height: 45px;
122  position: absolute;
123  right: -9px;
124  bottom: -39px;
125  background: rgba(222, 221, 221, 1);
126  z-index: -1;
127  transform: rotate(215deg);
128}
129