Button or switch in picture-glance entity?

Configuration Frontend
1

Hello guys, this seems a strange question, but i wish an opinion…

I have a 8x relay board configured as “pulse” switches in esphome (example):

  #rele no1
  - platform: gpio
    pin: $rele1
    inverted: true
    id: relay1
    name: "Garage"
    restore_mode: RESTORE_DEFAULT_OFF
    on_turn_on:
    - delay: 300ms
    - switch.turn_off: relay1

All goes well. I have added it to a lovelace picture-glance as follows:

iconscolor

I have other BUTTONS (not switches), who displays in white color (not light gray) at the cams bottom.
I wish to color them (maybe someone with its open/closed state), how do you suggest i can proceed?
Should i encode it as buttons instead of switches?.., or i ignore the switches and use a custom code (i’ve read about card-mod…) ? … I wish to remove the grayed footer also…

2

Seems to be the only way.

3

ooooook, done with card-mod (inside a grid) but… i have another issue!

Seems i have to change switches to buttons also, because there is no confirmation (or further steps to pseudo-confirm) once pressed a switch-icon. With the button is shown the activation history, and then you can tap on “PRESS”.

…or i should use restriction-card mod…

Screenshot 2023-09-01 184018

card-mod style:

style: |
  .type-picture-glance div:nth-child(2)
  {padding: 0px 0px;
   justify-content: left;
   --ha-picture-card-background-color: rgba(0,0,0,0);}
  .box div:nth-child(2) div:nth-child(1) {
    --ha-picture-icon-button-on-color: yellow;
    --ha-picture-icon-button-color: white;
  }
  .box div:nth-child(2) div:nth-child(2) {
    --ha-picture-icon-button-on-color: yellow;
    --ha-picture-icon-button-color: white;
  }