Product Prev Card Component Solution (Not Responsive)

Community feedback

• 

  Kukuh Wijanarko•190

  @kkhwjnrkPosted over 1 year ago

  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🙏

  Marked as helpful

  1