Button Styling on Click

Dash Python
1

I want to control the style of a button after it’s been clicked. Let’s say this button has an id of example-button. I have tried css of #example-button:focus, #example-button:active, #example-button:target, #example-button:visited … but none seem to have any effect.

I noticed this b/c my button outlines are grey; but whenever they are clicked, the outline turns black undesirably.

2

Hi @newman_jumbalaya
Can you pls share your code here for styling your button?

3 
#Reset_Time_Filter, #Reset_Map_Filter {
  background-color: white;
  color: black;
  border: 1px solid LightGray;
  font-family: Times;
  margin-left: 0px;
  margin-right: 0px;
}

#Reset_Time_Filter:hover, #Reset_Map_Filter:hover {background-color: #e7e7e7;}
#Reset_Time_Filter, #Reset_Map_Filter {border-radius: 4px;}

above is CSS in separate file

below is in .py file

html.Button("Reset Date Filter", id='Reset_Time_Filter',
                   style={'display': 'inline-block', 'vertical-align': 'middle',
                  "min-width": "150px",
                   'height': "25px",
                   "margin-top": "0px",
                   "margin-left": "5px"}
                    ),
 html.Button("Reset Map Filter", id='Reset_Map_Filter',
                      style={'display': 'inline-block', 'vertical-align': 'middle',
                      "min-width": "150px",
                      'height': "25px",
                      "margin-top": "0px",
                      "margin-left": "5px"}
                  ),

@bsbalkar, here you go :slight_smile: thanks

4

Hi @newman_jumbalaya
Sorry for late reply.

Pls refer to the below link. I hope it’ll help you.