✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Change hover color in dbc.button

Hi,

I would like to change the text color of a button when someone hover over it. However, I don’t know how I can access the css within the style option. Does anyone has an idea how to do it.

I tried the follwing but without success:

dbc.Button(
      'Logout',
      id='logout-button',
      block=True,
      style={
             'background-color': '#2dbecd',
              'color': '#ffc832',
              'border': '0px',
              'font-weight': 'bold',
              'hover': { 
                     'color': '#ffffff'
              }
      }
),

I don’t think it’s possible with inline styles, you need to add some css like

#logout-button:hover {
  color: #ffffff
}

You can read here about how to include CSS in your app.

If you want to do extensive restyling of Bootstrap, there’s also this app which lets you specify all kinds of options then compiles a Bootstrap stylesheet for you.

Thank you @tcbegley for your fast repley. The bootstrap app looks very promising.