How to change the button background color when clicked?

Question
1

Hello All,

I have a set of yes and no buttons that I want to have a transparent backgrounds until one is clicked. Then I would like the background color to fill in once clicked.

I have try to create this but keep failing, can someone help explain how to do this or point me to a tutorial video?

Thanks, Scott

1 Like
2

Have you tried assigning a boolean “transparency” variable (with an initial value of false) and use it to determine the BG color of the button?

Something like seeButton… So when you don’t click the button you get the visibility as alpha “0” and when you do click it you also change the variable to true… thus setting the BG colour to opaque.

Let me run you through it…

FIRST: preparing the button

Scott_1
Scott_1907Ă—542 122 KB

Scott_2
Scott_21208Ă—542 141 KB

Scott_3
Scott_4
Scott_5
Scott_6
Scott_7
Scott_7740Ă—396 50.8 KB

And this would be the code in mention for you to modify to your needs:

IF(pageVars.seeButton, "rgba(158,118,0,1)", "rgba(158,118,0,0)")

Now what it does is it simply checks the boolean value of the variable. If it is true you get the first value and if it is false you get the second.
And the numbers on the colour code is basically it’s red green and blue values. The last one is the “alpha” and usually if you do not change it you get a hex code rather than one like this.

When this number is “0” you get complete transparency and with “1” the complete opposite.

NOW the Logic:

Scott_8
Scott_81208Ă—542 141 KB

This theoretically SHOULD have you a button that you do not see the BG of until you click on it.

Hope this helps!

PS: you could do the EXACT same with the “Text color” in the TYPOGRAPHY menu of the button’s style editing options.

1 Like
3

Your Awesome Berter_Akyol!

I am having an issue with the formula. When I click on one button, they all fill in instead of just the one selected.

I figured out the IF formula if you saw that post.

Thsanks Again, Scott

1 Like
4

I think I should have guessed that you would be using more than one button :frowning: …
In my defense: I am an idiot :upside_down_face:

The thing here is that the variable “seeButton” presented is basically a global variable that pretty much is a constant within that page.
When you click on the button: it changes the variables value… And this pretty much is the same (Albeit “new”) value for everywhere in the page that the variable is used.

Individual colouring can only happen with individualization of the variable… Theoretically this can be through generating a schema where you can sort of auto generate per new buttons.

But if it is only a few buttons and the scene not too complex: It would be a lot less headache to just create a few more variables such as seebutton1, seebutton2, seebutton3, seebutton4, etc… Or similar

You sort of lost me there… Sadly I had not noticed/known/seen any of such post… I mean I think…

None the less I am always happy to read the “I figured out…” part of it regardless to what you may have meant :slight_smile:

Best of luck!

5

Thank you Berter! You were a huge help!

1 Like
6

This was of big help to me. Thank you.