Is there a way to have a button change colour on page refresh?

Does anyone know if there is a way to change a button colour every time someone refreshes a web page?

I’m a designer without much dev experience so would LOVE some help :slight_smile:

Yeah it would require custom code - these would be the steps

You’d need to find or write a script that generates a random hex color every time a page is loaded (there’s a bunch you could just grab online if you’re just going for a random color)

Then you would just take the value that that script generates and write a function that assigns that color as the CSS color for your button each time the page is loaded

If the colors need to be from a set selection instead of random you’d just need to assign variables to each color hex value and write a script that chooses one of those values at random each time the page is loaded and pass that randomly selected value as the background color

Going to take some JS/JQuery knowledge to put it all together

As Franz suggests, custom code or CSS vars + custom code is the best way. Its relatively straightfoward so ChatGPT might be enough to get you working code.

However if you will have a limited set of color variations, you could just create all of those variations as static elements, and then use Sygnal Attributes with limit = 1, sort = random.

And use option 3 here, because you don’t need it to be breakpoint-specific. You’ll just show 1 button regardless.

1 Like

wow nice library Michael already see some stuff that will be super helpful

1 Like