Change Background Color of button on hover

Dash Python
1

Hi everyone,
I’ve seen a question from a community member about changing color of button on hover, so I’m providing the answer below for future interest. Thank you to @jinnyzor for your help.

app.py:

import dash_bootstrap_components as dbc
from dash import html, Dash, Output, Input

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Button("Submit", id='submit-button', color="primary", className='sub-button')
])

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

mylayout.css (you can call your css file anything you’d like; just make sure it’s in the assets folder):

.sub-button:hover {
  background-color: #000000
}

This will change the background color of the button to black when the mouse cursor hovers over it.

If you’d like to change only the text color inside the button, you would need to update the CSS as such:

color: #000000
3 Likes
2

Commenting only to let folks know that it won’t work if you have any other inline styles defined. they must all be in the css

3

Hello @DwilliamsTM,

This is technically not true, while the default will act like this, you can pass a !important in the css stylesheet and it will override the inline styling.

.sub-button:hover {
  background-color: #000000 !important
}

Now, multiple !importants will conflict with each other, so be sure you know the order at which these will render.

1 Like