Combine conditional statements for button hover and click change effects

Questions
1

I have a button where I want to swap the text and background colors when the button is clicked (active) or hovered over. I’m using a custom yes/no state called button-on, and currently, I have four conditional statements per button:

  • This Button’s button-on is yes
  • This Button’s button-on is no
  • This Button’s button-on is yes and This Button is hovered
  • This Button’s button-on is no and This Button is hovered

Here are my questions: I tried combining This Button’s button-on is yes or This Button’s button-on is no and This button is hovered to cut down on the number of statements required, which didn’t work. I can’t seem to find parentheses to help Bubble know which statements are evaluated together. Like This Button’s button-on is yes or (This Button’s button-on is no and This Button is hovered). Is there a way to do that?

The second issue is that since the state changes immediately when clicked, the hover causes the original colors to flash back on. Is there a way to prevent this?

Thanks for taking the time to read this!

PS I’ve set up an example app to display the issues, but am not sure if there’s a way to share that.

2

Hi @faile486 :wave:

I am guessing you enabled the parentheses feature through here:

image
image886×966 58.4 KB

Then, you can group some expression together with parenthesis. See below how to do it, because it is not straight-forward. I have created this expression When current user is logged in OR (This button is pressed AND this button is hovered) [I know this condition may not really make sense :slight_smile:]:
brave_537EahJ1zL

Finally, next time, you can make your app viewable by others when you want to show some example app through the following menu:

image
image1287×541 54.8 KB

I hope these help.

bdk_512x512 @Huseyin from Flusk | Discover the #1 Security and Monitoring Tool for Bubble

1 Like
3

In order to get parentheses, I would need to upgrade to the growth plan? Guess I’ll just stick to the four conditional statements for now. It really sucks that it’s been a beta feature for over two years now!

Here’s the link to the test app: Bubble | No-code apps

Do I need parentheses to fix the hover issue?

Thank you, I appreciate your reply!

4

No, you dont need that.

The link you gave is a google doc link, not a bubble app and it doesnt let us view the doc anyways.

I couldnt understand the hover issue tbh. Can you please give example?

bdk_512x512 @Huseyin from Flusk | Discover the #1 Security and Monitoring Tool for Bubble

5

I got the parentheses! The checkbox was so light I couldn’t see it.

Sorry about that! I’ve updated the post. Here’s the correct link: Bubble | No-code apps

So the button is blue with white text by default (off) and swaps to white with blue text when clicked (on). The hover effects are reversed - when you hover over the button in it’s off state, the on state appears and vice versa. When you click the button it immediately swaps to the hover effect of the other state. It makes it look like you didn’t click it.

As of right now, I’m just removing the hover effect when the button is on in my main app.