▼
Streaming live at 10am (PST)

Button inside a link block

#1

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?

https://webflow.com/design/bellhop5?preview=e33901d515da32efc456fb181300dc86

Many thanks
Asser

#2

Select the link block and change the underline on it.

#3

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.

#4

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!

#5

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
Asser

#6

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

#7