[SOLVED] Change text color on button click

[k-alex]

Hi,

Is it possible to change the text color, or shape color when user click a button?

[fayewatson]

Yes, you can using custom states. I can show you how to do this if you’d like; I would just need the link to your app’s editor and what color you’d like the button to change to on click.

[k-alex]

Here is the link:

Bubble Editor - 3colors

[fayewatson]

Ok great in your app I created a custom state on Shape A called Color (Type: Text, List: No) described below. The event in the workflow could be set up like this:

When ‘Change Color’ Button is clicked → Element Actions → Set State → Element: Shape A, Custom State: create a new custom state…

And set the event workflow actions up in this way:

Here we’re telling Bubble that when the Change Color Button is clicked, and Shape A’s Color value is “Grey”, set the value to “Blue”.

Then I created another workflow when the Change Color Button is clicked and Shape A’s Color value is “Blue”, set the value to “Green”:

And when the Change Color Button is clicked and Shape A’s Color value is “Green”, set the value to “Grey”.

After the workflows are set up, then Shape A needs this conditional formatting in order for Bubble to know which colors exactly should be changed, depending upon the value of the Color custom state:

The last workflow we need is just to set the Color state of Shape A to Grey when the page is loaded:

[k-alex]

Awesome. Thank you very much for this tutorial. Works perfectly.

[fayewatson]

My pleasure!

[diego1]

Interesting! I now realize how useful states might be

[fayewatson]

Yes! They can save a lot of time and create a ton of possibilities

[ulrich_00132]

Hi. I’m new on Bubbler and already learned the basics. But I still don’t understand how to change the color of a button when it has been clicked.
I don’t get the beginning with the creation of “Shape A”. Can somebody help me please? All of you guys seem to figure it out. Thanks in advance.

[ulrich_00132]

Thanks Hikaru.

But how can the background colors change only when you click (not press) on the “Send button”

I would like to change the colors of this button “Ajouter”

Bubble Editor - lulushop

[ulrich_00132]

Can you show me step by step please? I created a blue “Add” button, when the user click on it, the button changes color and become grey. Only after clicking on it (not hover).

[hikaru]

If you dont want your button to change on hover, click remove condition.

[fayewatson]

Hi @ulrich_00132 Here is a step-by-step:

Preview:

Bubble - Visual Programming

Editor:

Bubble Editor - faye-demo-app

In this example, there is a blue “Add” button:

In order to make sure the User only clicks the button one time, and the button turns grey after one click, we need to create and set a custom state (as @hikaru did) There are a few different ways to set up a custom state, but I find the easiest one is to click on the button element to open the property editor, and then select the “i” icon in the top right corner to open the “Element Inspector”:

This Element Inspector will list all of the element’s custom states, and any workflow events that involve the element. In order to setup our custom state, we can click “Add a new custom state”:

Which brings up this popup:

Custom states are a bit confusing to explain, and sort of make more sense the more you set them up! Custom states can be used for many different reasons (e.g., keeping track of when a button has been clicked, temporarily storing a list of Products that a User has selected, temporarily storing a specific preference, and more). Unlike your app’s data which is stored “server-side”, custom states are stored “locally” for each User, meaning - once the User refreshes the page or changes pages, the custom states all get refreshed as well. In this example, since we only need to know whether the User has clicked a button, or if the User hasn’t yet clicked the button, we can set up a “yes/no” custom state called “Clicked?”:

After saving that we can set the default value of the custom state to be “no” (or “false”) since when the page is first loaded, the User has not yet clicked the button.

Because we’ve set up this custom state, we can change it from “no”(false) to “yes” (true) in a workflow when the Add button is clicked. To do this, we can set up a workflow:

“When Button Add is clicked, *only when Button Add’s “Clicked?” custom state is no” → Set the Button Add’s “Clicked?” custom state to “yes”. This makes sure that this workflow only occurs when the User is clicking the button for the first time:

Element Actions → Set State:

Set State action:

This workflow successfully changes the button’s custom state, but in order to change it to grey as well, we need to add a conditional which changes the button’s color to grey when its “Clicked?” custom state value is “yes”:

You can see it in action here!

And that should work! Feel free to let me know if I can clarify anything or if you have any questions!

[ulrich_00132]

@fayewatson & @hikaru : Thank you guys, you save my life

[SamUpstarters]

Just found this, and it’s SO helpful. Thank you so much for taking the time to lay this out so clearly and patiently. I really appreciate it.

[fayewatson]

Thank you so much, @SamUpstarters ! It’s my pleasure! So glad it was helpful!

[technoswift]

Hey fayewatson you still rock in 2021,
Thanks !

[podezelski]

Hi guys, thank you all for this step-by-step guide … i have one more question regarding the button state. If i understand correctly, this button color change is only session-based right? What would i need to do, to make this state write the change to the database?