Button (and other components) override css for hover

Dash Python
1

How can I override a Button (bootstrap component) css for when hovering?
E.g.:
dbc.Button(“Name”,
style={
‘background-color’: ‘transparent’,
‘border-color’: ‘transparent’,
‘color’: ‘#000000’,
‘hover-background-color’: ‘#555555’
}),

2

You can always do it via pure CSS and assigning a className. Or since its all in React u cann ad “:hover”:{…} inline into the attribute style.

3

Hi seferoezcan, thanks for the suggestion.

But I’d still like to know if that’s possible through the “style” keyword. For example, what if I want to change those properties after a callback?

4

As i said in the second :hover:{} in style should do the trick.

5

I tried it with:
style={
‘:hover’: {‘background-color’: ‘#555555’}
}

but it didn’t work. Any other ideas?

6

I would also recommend using an external css stylesheet to target the hover behavior. It is worth taking a look at this documentation: https://dash.plotly.com/external-resources
I hope this helps

7

Have you tried changing it to backgroundColor? React doesnt use standard CSS/HTML keywords. Try backgroundColor

8

I tried with backgroundColor, both html and dbc Button classes, none worked.

I think my question is a bit more general: how is it possible to change CSS selectors such as :hover. :active, ::after by means of the style keyword?

I could do most of the changes in CSS, but it half defeats my purpose here, which is keep as much logic as possible in python.
Besides, having complete access to all CSS styling through style keyword would allow an easier way to distribute customized components (e.g. as pip installable) without the need for distributing the specific css file as well (and requiring that it be loaded at the app initialization)

9

I opened a question with the proper formulation here: Is it possible to change CSS selectors such as :hover. :active, ::after with the `style` keyword?

so I’m closing this one