Ombre sous le button card

Entraide Home Assistant
1

Bonjour,

ombre fantome sous mon button card

System Information

version core-2025.11.3
installation_type Home Assistant OS
dev false
hassio true
docker true
container_arch amd64
user root
virtualenv false
python_version 3.13.9
os_name Linux
os_version 6.12.51-haos
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 5000
Installed Version 2.0.5
Stage running
Available Repositories 2455
Downloaded Repositories 18
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 16.3
update_channel stable
supervisor_version supervisor-2025.11.5
agent_version 1.7.2
docker_version 28.3.3
disk_total 233.0 GB
disk_used 9.4 GB
nameservers 192.168.1.1, 2a02:842b:8533:c801::1
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization
board generic-x86-64
supervisor_api ok
version_api ok
installed_addons Terminal & SSH (9.20.1), Mosquitto broker (6.5.2), File editor (5.8.0), Studio Code Server (6.0.1)
Dashboards
dashboards 3
resources 16
views 6
mode storage
Network Configuration
adapters lo (disabled), eno1 (enabled, default, auto), docker0 (disabled), hassio (disabled), veth80315bf (disabled), vethd8ca213 (disabled), veth4b6ca4b (disabled), veth9ce41fb (disabled), veth1798adb (disabled), veth34485c6 (disabled), veth585a904 (disabled), veth946fa1b (disabled), vethc3c09a3 (disabled), veth9bebeba (disabled)
ipv4_addresses lo (127.0.0.1/8), eno1 (192.168.1.83/24), docker0 (172.30.232.1/23), hassio (172.30.32.1/23), veth80315bf (), vethd8ca213 (), veth4b6ca4b (), veth9ce41fb (), veth1798adb (), veth34485c6 (), veth585a904 (), veth946fa1b (), vethc3c09a3 (), veth9bebeba ()
ipv6_addresses lo (::1/128), eno1 (2a02:842b:8533:c801:32f0:5d7a:1d44:ba9/64, fe80::592a:9972:9185:3eb3/64), docker0 (fe80::e4f0:10ff:fe60:1b4f/64), hassio (fd0c:ac1e:2100::1/48, fe80::90de:dfff:fe9c:92a2/64), veth80315bf (fe80::b42d:d2ff:fe16:95ab/64), vethd8ca213 (fe80::d80e:28ff:fe6b:e7c3/64), veth4b6ca4b (fe80::60b8:62ff:fe50:851a/64), veth9ce41fb (fe80::148d:7eff:fe76:8260/64), veth1798adb (fe80::60e6:85ff:fe5f:84c0/64), veth34485c6 (fe80::f4a5:e8ff:fee5:a925/64), veth585a904 (fe80::50d6:3dff:fe1f:32df/64), veth946fa1b (fe80::7c01:39ff:fefe:2a99/64), vethc3c09a3 (fe80::3457:cbff:feaf:b4a7/64), veth9bebeba (fe80::8b3:e5ff:fe6e:79b8/64)
announce_addresses 192.168.1.83, 2a02:842b:8533:c801:32f0:5d7a:1d44:ba9, fe80::592a:9972:9185:3eb3
Recorder
oldest_recorder_run 21 novembre 2025 à 14:30
current_recorder_run 30 novembre 2025 à 17:37
estimated_db_size 581.20 MiB
database_engine sqlite
database_version 3.49.2
___ bonjour , j'ai une carte button card avec deux boutons.lorsque je clic dessus d'un des boutons j'ai une ombre fantôme qui apparait et qui déborde de ce bouton, elle vient perturber le signal visuel , j'ai essaye pas mal de chose, mais là je sèche. pouvez vous m'aidez ( ps j'ai recherche dans le forum , j'ai rien trouvé). voici mon code: ``` type: custom:button-card entity: sensor.atc_5285_temperature name: Temperature show_state: true show_label: false show_icon: false styles: card: - width: 180px - height: 120px - border-radius: 15px - padding: 20px - box-shadow: none !important - filter: drop-shadow(0 0 0 transparent) !important - background: url('/local/images/bouttons/boutton00_retail.png') - background-size: contain - background-repeat: no-repeat - background-position: center - outline: none - "--mdc-ripple-fg-size": 0px - "--mdc-ripple-fg-opacity": 0 - "--mdc-ripple-color": transparent - "--primary-color": transparent - "--ha-card-box-shadow": none - "--ha-card-border-width": 0px grid: - grid-template-areas: "\"i\" \"s\" \"n\"" - grid-template-rows: 1fr min-content min-content - grid-template-columns: 1fr state: - font-size: 16px - font-weight: 600 - margin-top: 30px - color: "[[[\_\n const temp = parseFloat(entity.state);\n if (temp < 15) return '#00bfff';\n if (temp < 18) return '#4a90e2';\n if (temp < 22) return '#6bdb8f';\n if (temp < 25) return '#ffa500';\n return '#ff6b35';\n]]]\n" name: - color: grey - font-size: 13px - font-weight: 400 - margin-top: 26px - letter-spacing: 0.5px extra_styles: | [[[ return ` /* Cibler l'élément cliquable pour corriger la taille et le focus */ #card > button { width: 180px !important; height: 120px !important; margin: 0 !important; padding: 0 !important; outline: none !important; box-shadow: none !important; border: none !important; } /* S'assurer que le focus est désactivé sur le contenu de la carte */ .card-content:focus { outline: none !important; box-shadow: none !important; } `; ]]] tap_action: action: more-info

sur la photo on nevoit pas trés bien cette ombre ,mais elle est sur le premier bouton.

image
image346×149 23.8 KB

merci de votre lecture.

2

Hello,

Remet en forme ton message pour la partie code, ça sera plus simple pour tout le monde :wink:

image
image293×137 3.42 KB

cdt

1 « J'aime »
3

bonjour c’est pourtant ce que j’ai fait . je le refais.

type: custom:button-card
entity: sensor.atc_5285_temperature
name: Temperature
show_state: true
show_label: false
show_icon: false
styles:
  card:
    - width: 180px
    - height: 120px
    - border-radius: 15px
    - padding: 20px
    - box-shadow: none !important
    - filter: drop-shadow(0 0 0 transparent) !important
    - background: url('/local/images/bouttons/boutton00_retail.png')
    - background-size: contain
    - background-repeat: no-repeat
    - background-position: center
    - "--mdc-ripple-fg-size": 0px
    - "--mdc-ripple-fg-opacity": 0
    - "--mdc-ripple-color": transparent
    - outline: none
  grid:
    - grid-template-areas: "\"i\" \"s\" \"n\""
    - grid-template-rows: 1fr min-content min-content
    - grid-template-columns: 1fr
  state:
    - font-size: 16px
    - font-weight: 600
    - margin-top: 30px
    - color: |
        [[[ 
          const temp = parseFloat(entity.state);
          if (temp < 15) return '#00bfff';
          if (temp < 18) return '#4a90e2';
          if (temp < 22) return '#6bdb8f';
          if (temp < 25) return '#ffa500';
          return '#ff6b35';
        ]]]
  name:
    - color: grey
    - font-size: 13px
    - font-weight: 400
    - margin-top: 26px
    - letter-spacing: 0.5px
tap_action:
  action: more-info
hold_action:
  action: more-info

super ça a marché. donc voilà le code . merci

4

Bonjour,

Vire la ligne « - filter: » qui ne sert à rien. Enlève les " !important" qui n’ont pas lieu d’être avec custom:button-card et dis moi ce que ça donne.

5

merci pour votre aide, j’ai fais ce que vous m’avez dit . j’ai toujours ce cadre.

6

Pour ton deuxième bouton, tu utilises la même image ? (boutton00_retail.png)
Passe ton environnement en mode clair et refais une capture d’écran stp puis poste le code des deux boutons.

7

image
image344×126 17.1 KB

type: custom:button-card
entity: sensor.atc_5285_temperature
name: Temperature
show_state: true
show_label: false
show_icon: false
styles:
  card:
    - width: 180px
    - height: 120px
    - border-radius: 15px
    - padding: 20px
    - box-shadow: none 
   
    - background: url('/local/images/bouttons/boutton00_retail.png')
    - background-size: contain
    - background-repeat: no-repeat
    - background-position: center
    - outline: none
    - "--mdc-ripple-fg-size": 0px
    - "--mdc-ripple-fg-opacity": 0
    - "--mdc-ripple-color": transparent
    - "--primary-color": transparent
    - "--ha-card-box-shadow": none
    - "--ha-card-border-width": 0px
  grid:
    - grid-template-areas: "\"i\" \"s\" \"n\""
    - grid-template-rows: 1fr min-content min-content
    - grid-template-columns: 1fr
  state:
    - font-size: 16px
    - font-weight: 600
    - margin-top: 30px
    - color: "[[[\_\n  const temp = parseFloat(entity.state);\n  if (temp < 15) return '#00bfff';\n  if (temp < 18) return '#4a90e2';\n  if (temp < 22) return '#6bdb8f';\n  if (temp < 25) return '#ffa500';\n  return '#ff6b35';\n]]]\n"
  name:
    - color: grey
    - font-size: 13px
    - font-weight: 400
    - margin-top: 26px
    - letter-spacing: 0.5px
extra_styles: |
  [[[
    return `
      /* Cibler l'élément cliquable pour corriger la taille et le focus */
      #card > button {
        width: 180px 
        height: 120px
        margin: 0 
        padding: 0 
        outline: none
        box-shadow: none 
        border: none 
      }
      /* S'assurer que le focus est désactivé sur le contenu de la carte */
      .card-content:focus {
        outline: none 
        box-shadow: none 
      }
    `;
  ]]]
tap_action:
  action: more-info

merci

8

C’est le code du deuxième bouton que tu as posté ci-dessus ?

Essaie d’ajouter sur le premier bouton juste au dessus de la ligne « - background: url(‹ /local/images/bouttons/boutton00_retail.png ›) » « - background-color: transparent » en l’alignant correctement.

9

j’ai fais pour les deux boutons, cela ne change rien :confused:
question de débutant : est ce que fond on ne peux pas l’ajuster a l’image de mon bouton?

10

Quand tu fais ce genre de modification, n’hésite pas à vider le cache à chaque fois.
Bob

11

Quelle est la taille exact de ton bouton (png) ? A priori, il doit faire 120x120 pixels, c’est bien ça ?

remplace ton code par celui-ci et ta carte aura la taille exacte de ton image :

type: custom:button-card
entity: sensor.atc_5285_temperature
name: Temperature
show_state: true
show_label: false
show_icon: false
styles:
  card:
    - width: 120px
    - height: 120px
    - border-radius: 15px
    - padding: 20px
    - box-shadow: none 
   
    - background: url('/local/images/bouttons/boutton00_retail.png')
    - background-size: contain
    - background-repeat: no-repeat
    - background-position: center
    - outline: none
    - "--mdc-ripple-fg-size": 0px
    - "--mdc-ripple-fg-opacity": 0
    - "--mdc-ripple-color": transparent
    - "--primary-color": transparent
    - "--ha-card-box-shadow": none
    - "--ha-card-border-width": 0px
  grid:
    - grid-template-areas: "\"i\" \"s\" \"n\""
    - grid-template-rows: 1fr min-content min-content
    - grid-template-columns: 1fr
  state:
    - font-size: 16px
    - font-weight: 600
    - margin-top: 30px
    - color: "[[[\_\n  const temp = parseFloat(entity.state);\n  if (temp < 15) return '#00bfff';\n  if (temp < 18) return '#4a90e2';\n  if (temp < 22) return '#6bdb8f';\n  if (temp < 25) return '#ffa500';\n  return '#ff6b35';\n]]]\n"
  name:
    - color: grey
    - font-size: 13px
    - font-weight: 400
    - margin-top: 26px
    - letter-spacing: 0.5px
extra_styles: |
  [[[
    return `
      /* Cibler l'élément cliquable pour corriger la taille et le focus */
      #card > button {
        width: 180px 
        height: 120px
        margin: 0 
        padding: 0 
        outline: none
        box-shadow: none 
        border: none 
      }
      /* S'assurer que le focus est désactivé sur le contenu de la carte */
      .card-content:focus {
        outline: none 
        box-shadow: none 
      }
    `;
  ]]]
tap_action:
  action: more-info

Utiliser chatGPT c’est bien mais encore faut-il pouvoir comprendre ce qu’il te donne comme résultat car là, tu as une bonne partie des lignes qui ne servent à rien…

Si tu veux appréhender le fonctionnement de custom:button-card, jette un oeil ici : Aller plus loin avec la carte custom:button-card

1 « J'aime »
12

Salut,
oui ton tuto ou la doc aussi :wink:
Ça ne fonctionne plus avec --mdc-ripple, c’est --button-card-ripple maintenant.

13

Salut @WarC0zes

C’est d’autant plus vrai que l’ensemble de ces lignes n’apportent rien. Son cadre autour de son image est lié au focus sur la carte. Avec un pointer-events: none dans les styles de la carte, l’aspect plus foncé lors du survol de la souris n’apparait plus.

Le plus simple est soit de définir la taille de la carte à celle de l’image, soit de mettre l’image en custom_fields.

image
image1026×696 47.8 KB

Avec la carte à 120x120 px :

image
image1024×795 50.9 KB

Avec un custom_fields :

image
image1026×794 47.9 KB

14

oui, je suis d’accord avec toi , je débute ,j’essaye d’apprendre ( j’ai recherché des ouvrages , mais rien pour mon niveau. j’ai aussi fouillé l’internet ( bcp de videos..) merci pour le lien je l’avais pas trouvé. je vais lire. IA c’est le problème elle propose mais ne donne pas la démarche, pour certaines situations simple ça va , mais quand ça devient complexe c’est free style !!!

15

merci , je vais essayé les codes( la modification de la taille j’avais ça en tête aussi) et je reviens.

16

super , ça fonctionne nickel avec le redimensionnement de la carte. merci bcp

17

Voici le code avec un custom_fields :

type: custom:button-card
name: Temperature
custom_fields:
  bouton:
    card:
      type: custom:button-card
      entity: sensor.salle_a_manger_climatisation_ble_temp
      show_icon: false
      label: Température
      show_name: false
      show_state: true
      show_label: true
      styles:
        card:
          - aspect-ratio: 1/1
          - width: 120px
          - border: none
          - background: url('/local/images/bouton_test.png')
          - background-size: cover
          - pointer-events: auto
        state:
          - font-size: 16px
          - font-weight: 600
          - margin-top: 65px
          - padding-bottom: 30px
          - color: |
              [[[ 
                const temp = parseFloat(states['sensor.salle_a_manger_climatisation_ble_temp'].state);
                if (temp < 15) return '#00bfff';
                if (temp < 18) return '#4a90e2';
                if (temp < 22) return '#6bdb8f';
                if (temp < 25) return '#ffa500';
                return '#ff6b35';
              ]]]
        label:
          - color: grey
          - font-size: 13px
          - font-weight: 400
          - letter-spacing: 0.5px
      tap_action:
        action: more-info
styles:
  card:
    - width: 180px
    - height: 120px
    - border-radius: 15px
    - box-shadow: none
    - border: none
    - background: none
    - pointer-events: none
  custom_fields:
    bouton:
      - position: absolute
      - left: 30px

Il te suffit de changer l’entité et l’image. Les custom_fields te permettront d’aller plus loin avec custom:button-card. C’est intéressant de comprendre leur fonctionnement.

18

merci pour ce code, j’ai un souci , je l’ai adapté en entrant mes capteurs. tout s’affiche aucune erreur. lorsque je veux la sauvegarder , impossible, ça "rafraichi "le dashboard et c’est tout ? mystére.
ps désolé j’ai fait une petite video , mais impossible de la mettre

19

Va sur ton tableau de bord et fait “Ajouter une carte” puis colle le code sur une carte manuelle (tout en bas de la liste). Il ya deux endroits où il faut mettre ton entité :

type: custom:button-card
custom_fields:
  bouton:
    card:
      type: custom:button-card
      entity: sensor.salle_a_manger_climatisation_ble_temp   <--- ici
      show_icon: false
      label: Température
      show_name: false
      show_state: true
      show_label: true
      styles:
        card:
          - aspect-ratio: 1/1
          - width: 120px
          - border: none
          - background: url('/local/images/bouton_test.png')
          - background-size: cover
          - pointer-events: auto
        state:
          - font-size: 16px
          - font-weight: 600
          - margin-top: 65px
          - padding-bottom: 30px
          - color: |
              [[[ 
                const temp = parseFloat(states['sensor.salle_a_manger_climatisation_ble_temp'].state);    <---- ici
                if (temp < 15) return '#00bfff';
                if (temp < 18) return '#4a90e2';
                if (temp < 22) return '#6bdb8f';
                if (temp < 25) return '#ffa500';
                return '#ff6b35';
              ]]]
        label:
          - color: grey
          - font-size: 13px
          - font-weight: 400
          - letter-spacing: 0.5px
      tap_action:
        action: more-info
styles:
  card:
    - width: 180px
    - height: 120px
    - border-radius: 15px
    - box-shadow: none
    - border: none
    - background: none
    - pointer-events: none
  custom_fields:
    bouton:
      - position: absolute
      - left: 30px

Voici le code à copier directement (avec ton entité et ton image) :

type: custom:button-card
custom_fields:
  bouton:
    card:
      type: custom:button-card
      entity: sensor.atc_5285_temperature
      show_icon: false
      label: Température
      show_name: false
      show_state: true
      show_label: true
      styles:
        card:
          - aspect-ratio: 1/1
          - width: 120px
          - border: none
          - background: url('/local/images/bouttons/boutton00_retail.png')
          - background-size: cover
          - pointer-events: auto
        state:
          - font-size: 16px
          - font-weight: 600
          - margin-top: 65px
          - padding-bottom: 30px
          - color: |
              [[[ 
                const temp = parseFloat(states['sensor.atc_5285_temperature'].state);
                if (temp < 15) return '#00bfff';
                if (temp < 18) return '#4a90e2';
                if (temp < 22) return '#6bdb8f';
                if (temp < 25) return '#ffa500';
                return '#ff6b35';
              ]]]
        label:
          - color: grey
          - font-size: 13px
          - font-weight: 400
          - letter-spacing: 0.5px
      tap_action:
        action: more-info
styles:
  card:
    - width: 180px
    - height: 120px
    - border-radius: 15px
    - box-shadow: none
    - border: none
    - background: none
    - pointer-events: none
  custom_fields:
    bouton:
      - position: absolute
      - left: 30px
1 « J'aime »
20

j’ai trouvé, c’est dû a une mauvaise connexion avec l’ordi , excusez moi