Button remain color-changed when clicking on next page

Hello everything is fine ? Can anyone help? I need that when I click on a button it changes color and that color remains when it goes to the destination page. All the buttons are black, however I want it to turn red when clicked and stay red on your landing page.

For that, you’ll need a way to store the fact that the button has been clicked.

Your options are:

In the database
In some type of local storage
in the URL

which one is right for you, and exactly how to do it, depends on exactly what your needs are and what you’re trying to do.

Can you give me a step by step :sweat_smile:? I have 3 buttons in black color. I just want it to be identified with an exchange when clicked and to its page with the color red.

Not really, as I don’t know anything about your app or what you’re trying to achieve, or how your database is set up etc.

There are plenty of tutorials that will teach you the basics of using Bubble, specifically storing data in the database and using URL parameters.

But as a very basic overview, all you need to do is store the fact the the button has been clicked (however, and wherever makes the most sense for your specific use case), and then just use a condition on the button to change the colour.

Ok Thanks you

The simplest way would probably be to select the “send additional parameters” option on the workflow action that navigates you to the next page. You could call that parameter something like “icon” and set it to a name related to the icon like “my-route” when the my route icon is clicked.

Then set a conditional format on the my route icon that checks if the url parameter called “icon” is equal to “my-route” and, if so, change the icon color to red.

But if these are three separate pages, you could just check the name of the page in a conditional format of the icon, and set the color to red when the page name = the page associated with the icon. If they are truly 3 separate pages, theoretically, you could even just change the color of the icon on that page, unless this is in a reusable element.

thank you very much friend. I will try it this way. Sorry guys because I’m totally layman. I’m building this app with the help of chatGPT, even with many restrictions from Gpt because it doesn’t go according to Bubble updates. Even I am liking the results. Thanks!

1 Like

I just did a conditional ( current page name is (pagename) ). Thank you very much.

Good luck! The best way to learn bubble is by building new things. We were all beginners once and I am sure you will be a pro before you know it!

Thank you!