Design comparison
Solution retrospective
- I can't find a way to solve the
:hover
function, its just applying it to the svg element and not the whole button. Can you guys tell me how to fix it? - How to improve my css code because I feel that my code is not practical and simple
Community feedback
- @Sivin-WiPosted about 1 year ago
- Code Reformat :
<div class="btn"> <button><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to Cart</button> </div>
Important thing : "fa fa-shopping-cart" . take icon from " font awesome 4.7 🤔" icons.
- Hover Effect:
.btn> button { padding: 1em 4.4em; border-radius: 0.5em; background-color: hsl(158, 36%, 37%); border: none; color: hsl(0, 0%, 100%); } btn>button:hover { background-color: hsl(169, 38%, 25%); cursor: pointer; }
- Try to learn FlexBox
- Try It if it Work or not 🐱
1@MatthewA77Posted about 1 year ago@Sivin-Wi
Hi, thank you for the feedback. Can you explain the meaning of your solution :)
0@Sivin-WiPosted about 1 year ago@MatthewA77 use flexbox to align items faster way & for using svg code first try to save svg code to the file and add extension to file while saving eg: " img.svg " and use <img> element to add img src to " src attribute " . don't add svg code directly on html code it couldn't work ✊
0@MatthewA77Posted about 1 year ago@Sivin-Wi
Okayyy thanks for the tips on the svg stuff. I will catch you hahahaha 😎😎
0 - Code Reformat :
- @MaximilianoDanielGarciaPosted about 1 year ago
Hi Matt, great job!
If you want to add hover effect to the button you have to indicated it like this
#add-to-cart:hover {}
And if you want to center the card just remove
margin
from your body tag and add this:body { display: grid; place-items: center; min-height: 100vh; }
Let me know if these was helpful
1@MatthewA77Posted about 1 year ago@MaximilianoDanielGarcia
Thanks for the feedback, I already apply the
:hover
to the button through CSS but it only works when I hover my cursor on thesvg
element0@MaximilianoDanielGarciaPosted about 1 year ago@MatthewA77
I review your code and you have one space between the id and the hover selector
#add-to-cart :hover { background-color: #1E4033; cursor: pointer; }
Just, remove it and that's it.
1@MatthewA77Posted about 1 year ago@MaximilianoDanielGarcia
Wow I never expected that haha.. Thanks btw for the solution, very much appreciated.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord