Plotly Dash: How to change the button color when it is clicked?

Question

Hi I have 3 buttons designed in dash, I want to change the color of the button when it is clicked, I know there is to change in the @app.callback but I am not sure what to change. I want to keep everything same but the color should change to "Red"

Can anyone help me with this.

leftButtons = html.Div(id='framework-left-pane',                         
                         children=[
                         dcc.Link( children = html.Button(leftButton1,
                                                 id='leftbutton1',
                                                 className='roundbutton',
                                                 style={'backgroundColor': '#111100', 'color':'white','width':'100%', 'border':'1.5px black solid', 'height': '50px','text-align':'center', 'marginLeft': '20px', 'marginTop': 130},  n_clicks = 0)),
                         dcc.Link( children = html.Button(leftButton2,
                                                 id='leftbutton2',
                                                 className='roundbutton',
                                                 style={'backgroundColor': '#111100', 'color':'white','width':'100%' , 'border':'1.5px black solid','height': '50px','text-align':'center', 'marginLeft': '20px', 'marginTop': 20},n_clicks = 0)),
                         dcc.Link( children = html.Button(leftButton3,
                                                 id='leftbutton3',
                                                 className='roundbutton',
                                                 style={'backgroundColor': '#111100', 'color':'white','width':'100%', 'border':'1.5px black solid','height': '50px','text-align':'center', 'marginLeft': '20px', 'marginTop': 20},n_clicks = 0)),
                                                 ],style={'width':'200px','position':'fixed'})

`

so right now with app.callback I am returning an image only

@app.callback(
Output(component_id='tab_1_images', component_property='children'),
[Input('leftbutton1', 'n_clicks'),
Input('leftbutton2', 'n_clicks'),
Input('leftbutton3', 'n_clicks')])

def update_output_div(n_clicks_A, n_clicks_B, n_clicks_C):
    return [a static image for each of the button]

Answer 1

I had tried to color the button in dash as part of my exploratory project. As like yours I had the details already coded on button click but the button color was not changing while click of the button. I used the above response to integrate my existing code to give out both details on button click. ie output and change in color. Here is how your code should be looking like :

    @app.callback(
    Output('tab_1_images','children'),
    Output('leftbutton1',style),
    Output('leftbutton2',style),
    Output('leftbutton3',style),
    [Input('leftbutton1', 'n_clicks'),
     Input('leftbutton2', 'n_clicks'),
     Input('leftbutton3', 'n_clicks'),
    ]

    def update_output_div(btn1, btn2, btn3):
        msg = ''
        st1 = white_button_style
        st2 = white_button_style
        st3 = white_button_style
        if 'leftbutton1' == dash.ctx.triggered_id:
            msg = [a static image for each of the button]
            st1 = red_button_style
        if 'leftbutton2' == dash.ctx.triggered_id:
            msg = [a static image for each of the button]
            st2 = red_button_style
        if 'leftbutton3' == dash.ctx.triggered_id:
            msg = [a static image for each of the button]
            st3 = red_button_style
        return msg,st1,st2,st3

Answer 2

To change the color of the button after it is clicked you need to update the corresponding style property in the callback:

import dash
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

white_button_style = {'background-color': 'white',
                      'color': 'black',
                      'height': '50px',
                      'width': '100px',
                      'margin-top': '50px',
                      'margin-left': '50px'}

red_button_style = {'background-color': 'red',
                    'color': 'white',
                    'height': '50px',
                    'width': '100px',
                    'margin-top': '50px',
                    'margin-left': '50px'}

app.layout = html.Div([

    html.Button(id='button',
                children=['click'],
                n_clicks=0,
                style=white_button_style
    )

])

@app.callback(Output('button', 'style'), [Input('button', 'n_clicks')])
def change_button_style(n_clicks):

    if n_clicks > 0:

        return red_button_style

    else:

        return white_button_style

if __name__ == '__main__':
    app.run_server(debug=True)