1.cartBtn {
2  width: 155px;
3  height: 50px;
4  border: none;
5  border-radius: 0px;
6  display: flex;
7  align-items: center;
8  justify-content: center;
9  gap: 7px;
10  color: white;
11  font-weight: 500;
12  position: relative;
13  background-color: rgb(29, 29, 29);
14  box-shadow: 0 20px 30px -7px rgba(27, 27, 27, 0.219);
15  transition: all 0.3s ease-in-out;
16  cursor: pointer;
17  overflow: hidden;
18}
19
20.cart {
21  z-index: 2;
22}
23
24.cartBtn:active {
25  transform: scale(0.96);
26}
27
28.product {
29  position: absolute;
30  width: 12px;
31  border-radius: 3px;
32  content: "";
33  left: 23px;
34  bottom: 23px;
35  opacity: 0;
36  z-index: 1;
37  fill: rgb(211, 211, 211);
38}
39
40.cartBtn:hover .product {
41  animation: slide-in-top 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
42}
43
44@keyframes slide-in-top {
45  0% {
46    transform: translateY(-30px);
47    opacity: 1;
48  }
49
50  100% {
51    transform: translateY(0) rotate(-90deg);
52    opacity: 1;
53  }
54}
55
56.cartBtn:hover .cart {
57  animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
58}
59
60@keyframes slide-in-left {
61  0% {
62    transform: translateX(-10px);
63    opacity: 0;
64  }
65
66  100% {
67    transform: translateX(0);
68    opacity: 1;
69  }
70}