Product Prev Card Component Solution (Not Responsive)

Wrapping the image inside a container element is unnecessary when adding it to a button. Instead, we can directly add the image inside the button element. Like this:

<button class="btn">
  <img src="./assets/images/icon-cart.svg" alt="">
  Add to cart
</button>

We can use flexbox to align the image and the text inside the button. We can apply the flex properties to the button element like this:

.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
}

.btn img {
  width: 1rem;
  margin-right: 0.75rem;
}

I hope this helps🙏