Card by VashonG

1.card {
2  position: relative;
3  height: 300px;
4  width: 230px;
5}
6.card:nth-child(2) {
7  filter: hue-rotate(300deg) brightness(1.3);
8}
9.card:nth-child(3) {
10  filter: hue-rotate(200deg) brightness(1.5);
11}
12.card:nth-child(4) {
13  filter: hue-rotate(60deg) brightness(3);
14}
15.card .boxshadow {
16  position: absolute;
17  height: 100%;
18  width: 100%;
19  border: 1px solid red;
20  transform: scale(0.8);
21  box-shadow: rgba(255, 0, 0, 1) 0px 30px 70px 0px;
22  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
23}
24.card .main {
25  width: 230px;
26  height: 300px;
27  overflow: hidden;
28  background: red;
29  background: linear-gradient(
30    0deg,
31    #3e0000 0%,
32    rgba(255, 0, 0, 1) 60%,
33    #3e0000 100%
34  );
35  position: relative;
36  clip-path: polygon(
37    0 0,
38    100% 0,
39    100% 40px,
40    100% calc(100% - 40px),
41    calc(100% - 40px) 100%,
42    40px 100%,
43    0 calc(100% - 40px)
44  );
45  box-shadow: rgba(255, 0, 0, 1) 0px 7px 29px 0px;
46  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
47}
48.card .main .top {
49  position: absolute;
50  top: 0px;
51  left: 0;
52  width: 0px;
53  height: 0px;
54  z-index: 2;
55  border-top: 115px solid black;
56  border-left: 115px solid transparent;
57  border-right: 115px solid transparent;
58  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
59}
60.card .main .side {
61  position: absolute;
62  width: 100%;
63  top: 0;
64  transform: translateX(-50%);
65  height: 101%;
66  background: black;
67  clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%);
68  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;
69}
70.card .main .left {
71  left: 0;
72}
73.card .main .right {
74  right: 0;
75  transform: translateX(50%) scale(-1, 1);
76}
77.card .main .title {
78  position: absolute;
79  left: 50%;
80  transform: translateX(-50%);
81  top: 90px;
82  font-weight: bold;
83  font-size: 25px;
84  opacity: 0;
85  z-index: -1;
86  transition: all 0.2s ease-out 0s;
87}
88.card .main .button-container {
89  position: absolute;
90  bottom: 10px;
91  left: 50%;
92  transform: translateX(-50%);
93}
94.card .main .button-container .button {
95  position: absolute;
96  transform: translateX(-50%);
97  padding: 5px 10px;
98  clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%);
99  background: black;
100  border: none;
101  color: white;
102  display: grid;
103  place-content: center;
104  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
105}
106.card .main .button-container .button .svg {
107  width: 15px;
108  transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
109}
110.card .main .button-container .button:nth-child(1) {
111  bottom: 300px;
112  transition-delay: 0.4s;
113}
114.card .main .button-container .button:nth-child(2) {
115  bottom: 300px;
116  transition-delay: 0.6s;
117}
118.card .main .button-container .button:nth-child(3) {
119  bottom: 300px;
120  transition-delay: 0.8s;
121}
122.card .main .button-container .button:hover .svg {
123  transform: scale(1.2);
124}
125.card .main .button-container .button:active .svg {
126  transform: scale(0.7);
127}
128.card:hover .main {
129  transform: scale(1.1);
130}
131.card:hover .main .top {
132  top: -50px;
133}
134.card:hover .main .left {
135  left: -50px;
136  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
137}
138.card:hover .main .right {
139  right: -50px;
140  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
141}
142.card:hover .main .title {
143  opacity: 1;
144  transition: all 0.2s ease-out 1.3s;
145}
146.card:hover .main .button-container .button:nth-child(1) {
147  bottom: 80px;
148  transition-delay: 0.8s;
149}
150.card:hover .main .button-container .button:nth-child(2) {
151  bottom: 40px;
152  transition-delay: 0.6s;
153}
154.card:hover .main .button-container .button:nth-child(3) {
155  bottom: 0;
156  transition-delay: 0.4s;
157}
158