@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your question that I believe will be of great interest to you.
REFACTORING THINGS :
- You don't need to nest
a
inside ofbutton
, it only causes accessibility issues. Instead you can just apply the styles which you wrote forbutton
toa
element directly.
- Using CSS you can style any elements,
a
also completely customizable. So my suggestion for you is to only havea
directly without nesting withbutton
elements.
- The resulted styles will be like this,
a {
background: hsl(0, 0%, 20%);
border-radius: 0.5rem;
margin: 0.45rem;
border: none;
padding: 0.9rem;
width: 17.2rem;
text-align: center;
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
}
a:hover {
background-color: hsl(75, 94%, 57%);
}
- By refactoring your elements on html and the styles you written on css would be a great thing to rectify accessibility issues with your solution.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful