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
2 Likes