Lists with both links and buttons?

It’s weird how the simplest things pass you by :grin:

<ul>
   <li><a href="#">About</a>></li>
   <li><a href="#">Contact Details in footer</a></li>
   <li><button>Button to inject html element for login</button></li>
</ul>

That’s the correct way to do it isn’t it? Style the button to look like the other links in the menu? Or should I just select the a tag with JS and use an on-click?

Thanks!

Usually links get styled as buttons not the other way around.

yeah, fair point, but my question remains largely the same - should I style one as the other? :slightly_smiling_face:

I would never have even thought of your question. I’m old school. So I wouldn’t. What’s the context? Is it a single page website?

Nah, multipage. Just was about to grab the Login element to add a listener and suddenly thought that it should probably, semantically, be a button rather than a link (which is actually what it currently is, rather than the example above) :man_shrugging:

Maybe it doesn’t really matter

It looks a little strange to me to see a button inside a list, but I guess it’s ok after some thought. I’d put the button outside the list and adjust spacing with margin. Make the button and the list items inline-block if it’s horizontal. Probably comes down to preference.

Whichever you prefer. But it is a little odd to use a button at all if you want to style it like a list.

yeah me too!

Yup, I don’t disagree, but just a little voice in the back of my head saying “well if I’m going to use an <li>, or a <section> tag out of semantic correctness…”

Not going to lie though, I’m very ok with just grabbing the link element and adding a listener to it :grin:

Thanks!