How to change the grey background focus color on a button when holding the mouse down

Configuration Frontend
1

Hi everyone

I am using the custom button card but i am trying to change the background color of the button once its clicked and held down briefly. If you click and hold on a button there is a grey background almost like a focus that appears and then it will transition to what ever background is set on the card once its been clicked. I cant for the life of me find the variable that references this behaviour.

Just wondered if anyone else might know. If this makes no sense click a button on your dashboard but down release the mouse button and you will see what i mean.

Thank you

2

Test this example…

type: custom:button-card
entity: sun.sun
styles:
      card:
        - '--mdc-ripple-color': blue
        - '--mdc-ripple-press-opacity': 0.2
3

Or just add to your theme in themes.yaml:

theme:
  paper-tab-ink: rgba(0,0,0,0) 
  mdc-ripple-color: rgba(0,0,0,0)
  mdc-ripple-press-opacity: 0
  mdc-ripple-hover-opacity: 0
  mdc-ripple-focus-opacity: 0
  mdc-ripple-fg-opacity: 0
  mdc-ripple-press-opacity: 0

In my case, I turned it off as it anoys me.

4

thank you this is what i was looking for!

1 Like