Button mouse pressdown css effect

I’ve been managing to modify almost ever aspect of buttons with a local CSS file, except whenever the mouse presses down on it. Example:

dbc.Button(children='Button', className='navbarButton')

CSS:

.navbarButton {
  box-shadow: none;
  border-color:  transparent;
  border: none;
  background-color:  transparent;
  color:  #000000;
  font-size:  20px;
  font-family: Cambria;
  font-weight: normal;
}

.navbarButton:focus {
  box-shadow: none;
  border-color:  transparent;
  border: none;
  background-color:  transparent;
  color:  #000000;
  font-size:  20px;
  font-family: Cambria;
  font-weight:  bold;
}

.navbarButton:hover {
  border-color:  transparent;
  background-color:  transparent;
  color:  #000000;
  font-weight:  bold;
}

.navbarButton:active {
  box-shadow: none;
  border-color:  transparent;
  border: none;
  background-color:  transparent;
  color:  #000000;
  font-size:  25px;
  font-family: Cambria;
  font-weight: normal;
}

This is the result:

gif_buttons_dash738×75 92.3 KB

I know the :active is kind of working because the font-size changes (just for testing), but not the colors nor the shadow!
They seem to return to a basic button style, so my intuition says it has something to do with basic style properties being carried on to other states (such as active). But why won’t all the properties be updated by my CSS file?

In this specific case, I would like the button aspect to remain the same when the mouse presses down on it.

1 post - 1 participant

Read full topic