@anh-vumartell
Posted
Hi! I’d use interactive element like <button> for all buttons in this challenge instead of wrapping <a> tag inside a <div class=“btn btn-orange> so you can apply hover effect on the entire button. Cheers,
Marked as helpful
@nenamartinez
Posted
@anh-vumartell Thank you for your response! I have one question. I read that it was bad practice to use the 'button' element for links that are styled as buttons, and that the 'button' element should be reserved for buttons that have actions associated with it (like a "submit" button for a form).
Is it okay to use the 'button' element in cases like this, that are basically just anchors?
@nenamartinez
You are correct, these are not buttons, and so you shouldn't use a button. A link is the right element here, as on a real site, these would take you to a new page.
What I would probably do differently is remove the wrapper div. At the moment you have a clash of specificity. You're applying some styles to div:hover and others to a:hover and they're competing.
Instead, you can get rid of that div, and set display: block on the link element and style it how you wish.
Marked as helpful
@nenamartinez
Posted
@AlexKMarshall
Alex, thank you so much for clearing that up! I see the specificity problem now. For some reason it didn't occur to me that I could just style the anchor directly instead of wrapping it in a div-- d'oh! Great idea! I'll get to work on cleaning the code up.
