Miguel Arciaga
@sprakamatisAll comments
- @israeljrxSubmitted almost 2 years ago@sprakamatisPosted almost 2 years ago
Nice work! I see a lot of people disregarding the off-white background, it is great to see that you have used the given background color.
1 - @StevenTheAnalystSubmitted over 2 years ago
What's the best way to 'group' the button icon and button text together to target for CSS? I tried using the float attribute but it moved the whole button instead of the components inside it. I ended up resorting to applying paddings to each one individually.
@sprakamatisPosted over 2 years agoHello, wonderful work!
If I understood your question correctly, the answer to that is you can wrap the button text inside a <span> and then wrap both the button <img> and <span> inside the <button> element then use display flex on the button element.
Here is an example: (HTML) <button class="add-to-cart"> <img src="images/icon-cart.svg" alt=""> <span>Add to Cart</span> </button>
(CSS) .add-to-cart { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1em; padding: 1em; }
2