Answered

Changing Button Colours As They are Clicked On

(1) Share

Report

Posted on by AW-14112300-0

New to Power Apps and looking to make a button change colour by clicking it. I need it to go from gray, to red, to yellow, to green, and then back to gray again. I have been trying other solutions in other posts, but can't seem to find anything that works for this particular situation. Would really appreciate help on this one - thanks in advance!

Categories:

Building Power Apps

I have the same question (0)

All responses (4)

Answers (1)

mmbr1606 14,605 Super User 2025 Season 2 on at

Like (2)

Report
hey

try this:

onvisible of screen for example:

Set(btnColorState, 0)

onselect of button:

Set(btnColorState, If(btnColorState = 3, 0, btnColorState + 1) )

and then the fill property of the button:

Switch( btnColorState, 0, Color.Gray, 1, Color.Red, 2, Color.Yellow, 3, Color.Green )

you maybe need to set the hoverfill property of the button also to the same:
Switch( btnColorState, 0, Color.Gray, 1, Color.Red, 2, Color.Yellow, 3, Color.Green )
or you use other colors for it so the user knows hes hovering the button

just tested and it worked

if it helped please mark as verified answer

cheers

Was this reply helpful? Yes No
AW-14112300-0 10 on at

Like (0)

Report

@mmbr1606 Thanks so much for your speedy response - will the formula you provided below also help ensure that several buttons on the same screen will change colours when clicking on them independently from one another?

For example, when I click on Button 1 and it changes colour, Button 2 remains the original colour as if it was not clicked on and then will only change colour itself when it is clicked on?

Thanks so much!

Was this reply helpful? Yes No
timl 36,393 Super User 2025 Season 2 on at

Like (1)

Report
To make this work independently for different buttons, you would need to use different variable names.

Let's assume that you implemented mmbr1606's solution for Button 1.

For button 2, you would then add this to the OnVisible property screen and carry out the exact remaining steps, except that you would replace each instance of btnColorState with btnColorState2.

Set(btnColorState2, 0)

Was this reply helpful? Yes No
Verified answer

mmbr1606 14,605 Super User 2025 Season 2 on at

Like (0)

Report
if u need a second one

Set(btnColorState1, 0); Set(btnColorState2, 0)

button one onselect:

Set(btnColorState1, If(btnColorState1 = 3, 0, btnColorState1 + 1))

button 2 onselect:

Set(btnColorState2, If(btnColorState2 = 3, 0, btnColorState2 + 1))

button 1 fill:

Switch( btnColorState1, 0, Color.Gray, 1, Color.Red, 2, Color.Yellow, 3, Color.Green )

button2 fill:

Switch( btnColorState2, 0, Color.Gray, 1, Color.Red, 2, Color.Yellow, 3, Color.Green )

if you would need a 3rd or 4th just use the same logic wit 3 and 4

if that helped please mark as verified

Was this reply helpful? Yes No