How to achieve glow effect?

[macbih]

I am trying to implement a glow effect which perfectly works with the Button Card (source see here).

# Button Card syntax
state:
  - value: 'on'
    styles:
      card:
        - '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - transition: all 2s ease

So far, I was not able to transfer it to the Paper Buttons Row to achieve the same glow effect. For example, this base_config does not work:

    base_config:
      preset: mushroom
      state_styles:
        'on':
          button:
            '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
            box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
            transition: all 2s ease

Can someone help me with this, please?

[jcwillox]

the css variable --button-card-light-color is only available when using button-card, so you need to use the equivalent of paper-buttons which is rgb(var(--pbs-button-rgb-state-color)) or rgb(var(--pbs-button-rgb-active-color))

    base_config:
      preset: mushroom
      state_styles:
        'on':
          button:
            '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(var(--pbs-button-rgb-state-color))
            box-shadow: 0 0 0.95rem 0.2rem rgb(var(--pbs-button-rgb-state-color))
            transition: all 2s ease

[macbih]

Thank you very much, Josh @jcwillox! That works perfectly! And also thanks for the CSS explanation!

Can you please add a short example how to implement this as a preset for the raw configuration editor? Unfortunately, I am not able to get this working as well (while other presets for the button card do work).

paper_buttons_row:

  presets:

    lamp:
      preset: mushroom
      ???

Just putting the state_styles section into there does not seem to be sufficient. I am using it this way:

type: entities
show_header_toggle: false
entities:
  - type: custom:paper-buttons-row
    preset: lamp
    buttons:
      - entity: light.xyz
        layout: icon
        icon: mdi:power
      - entity: ...

Thank you!