Best way to pass hover state to a button that has text / icons on top?

As shown in screenshot, I have buttons with an icon and text on top.

Buttons have hover states but hover states are only active when the part of the button without any overlaid text or icon is hovered.

I want my hover state to be active when the cursor is within the button’s boundaries even if there is an icon or text on top of the button.

What’s the best way to do this? I’m thinking I could put a transparent button on top but wondering if there’s a simpler way that doesn’t involve adding more elements.


@tjc4 What I do is on the button, right click it and “Bring to Front”. Try that and see if it works in your case. I tried that but got this…

@tjc4 Ah yes, what I meant was the group surrounding the button. So, the group that holds the button, the icon, and the text, bring that one to the front and apply the hover to the group vs. the button.

1 Like thanks for the reply. Sorry but I’m still not getting it.

I tried the conditional on the group but I can’t figure out how to make that work either.

As far as I can tell, you can’t select a property on element A (e.g. the button) to change when element B (e.g. the group) is hovered. nevermind. I realized what you were telling me was to style the group as I wanted the button styled and make the button transparent.

Looking good now. Thanks!

1 Like


I have exactly the same problem. However, I do not really get your conclusion on how you fixed the problem.

Yes, I understood you need to have a group on top of the button where you apply the hover effect. So far so good.

Yet, as you mentioned there is no way to change the styling of the button or the shape itself triggered by the hover of a group on top of them. How did you do that?


Look at how I build my Group Google in the elements tree:

Look at the styling on my Button Styling for Group:

1 Like

Thanks so much for your quick answer. The Styling menu is obviously the way to go. Could get it work now! Cheers!

Just to throw a couple other options out there…

Alternative 1: Icon on Top of Button

It’s not clear why a text element was placed on top of the button in the previous examples, but the following method makes use of the button’s caption instead, and so it requires only two elements:



Alternative 2: Single Text Element

A Text element can respond to clicks, and BB code can be used for the “icon”, so a Button element is not actually required at all:


Having said all that, I’d probably use a Button element and then a Text element for the icon (so that the “icon” and caption could be positioned and styled independently). Then, I’d use an Option Set to store the icon- and button-specific info and an RG to output all the buttons in one fell swoop, thereby keeping things simpler and more maintainable.

@shot thanks for taking the time and elaborate on further options. I will keep them in mind.

One related topic: I have placed a text cell in each column of a repeating group layout which sources some data. So far, everything is working fine. However, I would like to have each row change color by hovering.

I read in a similar threat which is closed unfortunately, that the solution is to place the text cell in a group layout with the hover effect applied and the group layout in the RG layout. When I do this, I can not source the data, because the text cell does not have the option “Current cell’s…” anymore. Do you have any idea how to solve that properly?


If I understand correctly, then just “propagate” the data to the group - i.e. set the group’s Type of content to “Current cell’s…” and then set the text element to “Parent group’s…”.

thanks, this solved it!

1 Like

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