Black Lives Matter. Please consider donating to Black Girls Code today.

Buttons on off independent styles

Hi all

I have put together an example that lets me independently add and remove traces from a plot. However, I would like to change the button stylings so that for each button, when it is ‘on’ (the corresponding trace is showing) the button is highlighted, and when it is ‘off’ (the corresponding trace is not showing) the button is greyed.

As it stands, if you click on a button, it is highlighted, but if you then click the other button then only that button is highlighted. But if both traces are showing, I would like both buttons to be highlighted. I could probably write more callbacks to change the css of the buttons, but I don’t know what attribute of a button is responsible for highlighting, and I am hoping there might be an easy solution. Many thanks.

You’ll have to change its style in some way. The “highlight” effect you’re seeing I think is just browser niceity, there’s no code or even CSS causing that to happen.

Making a callback for each button that takes the hidden div as input and outputs to the button’s style attribute should do what you want. ( And sending a dict(color = 'blue', backgroundColor = 'yellow') or similar.)

@Peter_S thanks so much - that is exactly what I needed to know.