Making a button border visible when button is hover & also when button is active

Hi. I am new to bubble.
I need help.
How do I make a menu button’s bottom border visible with different colour when the button is hovered & also when the button is active. I want to distinguish the active menu button from all the other menu buttons just like the chat menu button is active and has a bottom border under it in this image.


Thanks in advance.

I’d suggest looking at some of the tutorial videos on setting conditions on your elements. You’ll find them under the conditions tab on each element. You can then set conditions such as:

When Chat_Group is visible–> change border color to Red. You can also set the element to define each border independently, so only the bottom border is changed.

1 Like

@jcindy81 is on the right track here. But what do you mean @hatagoeiseb, by “Button is active”? There is not such a state. Do you mean when “pressed”? That’s a condition you can style on as well.


Happy Bubblin’!

1 Like

Hi. Thanks for the replies. :grinning:
By button is active I mean, when the button is pressed and the user is viewing the content on the page of the pressed button. Like in the picture below. The CHATS button is active thus having an underlined border.


Hi @jcindy81
I went into conditions of the element but I cannot find a setting that says format individual borders. I could only find border style - all borders.
There seems to be no style setting for individual borders.

Thanks for your help.

On the design tab of that menu, you have to check the box that lets you style all borders independently. Once you do that, this dropdown updates with the different options.

1 Like

Oh my word. :grinning:
I followed your instructions and it actually works.
Result when hovered

Thanks a lot @andrewgassen
Happy Bubblin’! :blush:

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.