Streaming live at 10am (PST)

Button inside a link block

I discovered I couldnt link a button (like a link block).

So I put the button inside a Link block. But when I do that, it underscores the text. I can’t figure out why?

Many thanks

Select the link block and change the underline on it.

Thanks, it worked.

Sometime I have a difficulty seing which properties is turned on. In this case the underline option wasnt selected, but by clicking it twice, it worked.

Thanks again.

Yeah sometimes the underline behaves differently in different elements. We’ll be making that more consistent.

Some important things to know about buttons and empty <a> blocks (or link blocks) in HTML/CSS:

  • By default any text inside of a link block will be underlined because they are all links (they are inside of a link block). Everything inside of a Link Block is a link (that’s the point of the link block). To change this you have to select the Link Block and remove the underline as you would with a Text Link for example. This will cascade down to all the text inside of it.
  • You CANNOT put a Link Block or Button or Text Link inside of a Link Block. Well you can, but it will be funky. That’s how HTML works. What will happen when your browser renders the page is it will literally assume any <a> inside of other <a> aren’t inside but next to each other. So if you have a link inside of another link the browser will move that second link outside of the first link.

So in summary: don’t try to put other links in other Link Blocks. It just won’t work as you’d expect in the end. Keep it simple - one link/button at a time.

Hope this helps!

1 Like

Haha, learning by doing :smile:

Thanks for your pointers, it’s helping me improve.

I ended up making a link block and put a div block (with a p inside that). To make it look like a button, but act like a link :smile:

Thanks again

Perfect! That’s the right approach when you are making a big button with many elements inside.