🥇🥇🥇 Woo hoo! Looks great -- I have some super picky feedback for you on your hover style though.
Right now you have:
a {
text-decoration: none;
color: white;
background: gold;
display: block;
padding: 0.5em 1.0em;
width: 120px;
}
a:hover {
background: gold;
color: black;
display: block;
width: 120px;
padding: 0.5em 1.0em;
}
That's awesome and gives you a great looking bunch of buttons. BUT -- check the red Substack button at the top of the page. See how that button changes on hover? That's because you have lots of declarations styling ALL hover states on the page, and it's not needed.
Reduce your hover style to ONLY the items that change on hover. In this case...
a:hover {
color: black;
}
Your buttons look the same, but there's less code, which means less bugs in the future (maybe). 🤣 Great job and thanks for sharing!
Very nice! If you want that overlapping link effect, where the links are only as big as the text, you did very well. If you want to have the green completely cover the black on hover, there's only one thing you need to add:
nav a { display: block; }
Try throwing that into your code and see how the layout changes. Great job and thanks so much for sharing! 🎉🎉🎉
https://codepen.io/gamzebercin/pen/OJxXXoN?editors=1100
🥇🥇🥇 Woo hoo! Looks great -- I have some super picky feedback for you on your hover style though.
Right now you have:
a {
text-decoration: none;
color: white;
background: gold;
display: block;
padding: 0.5em 1.0em;
width: 120px;
}
a:hover {
background: gold;
color: black;
display: block;
width: 120px;
padding: 0.5em 1.0em;
}
That's awesome and gives you a great looking bunch of buttons. BUT -- check the red Substack button at the top of the page. See how that button changes on hover? That's because you have lots of declarations styling ALL hover states on the page, and it's not needed.
Reduce your hover style to ONLY the items that change on hover. In this case...
a:hover {
color: black;
}
Your buttons look the same, but there's less code, which means less bugs in the future (maybe). 🤣 Great job and thanks for sharing!
https://codepen.io/serdar-cihan-g-le-/pen/dyRmGMy
This is my solution. I tried by simply copying the coding in example 2 in codingpen and changing it to menu names.
I set to nav black.
nav a {
background-color: black;
a { color : gold.
[ I deleted the a { color background color because nav a had it so it was redundant to keep it as a sen tence]
then for a:hover {
I set it to
color: white;
background-color: green;
Very nice! If you want that overlapping link effect, where the links are only as big as the text, you did very well. If you want to have the green completely cover the black on hover, there's only one thing you need to add:
nav a { display: block; }
Try throwing that into your code and see how the layout changes. Great job and thanks so much for sharing! 🎉🎉🎉