# Ombre sous le button card

**URL:** <https://forum.hacf.fr/t/ombre-sous-le-button-card/71307>\
**Category:** Entraide Home Assistant\
**Tags:** button-card\
**Created:** [Novembre 30, 2025, 5:39 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307 "2025-11-30T17:39:44Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![droid](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/54ee81/32.png) [@droid](https://forum.hacf.fr/u/droid)\
**Post date:** [Novembre 30, 2025, 5:39 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/1 "2025-11-30T17:39:44Z")

</div>

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](https://forum.hacf.fr/uploads/default/original/3X/f/6/f655d41abd75981c4ce2116616fe8506382eda52.png)  
merci de votre lecture.

```auto

```

---

<div class="post-metadata">

**Author:** ![freetronic](https://forum.hacf.fr/user_avatar/forum.hacf.fr/freetronic/32/88342_2.png) [@freetronic](https://forum.hacf.fr/u/freetronic)\
**Post date:** [Novembre 30, 2025, 6:01 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/2 "2025-11-30T18:01:14Z")

</div>

Hello,

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

 ![image](https://forum.hacf.fr/uploads/default/original/3X/1/a/1a75098e03cc4839afef79cab6ac9ab9e9a86ab5.png)

cdt

---

<div class="post-metadata">

**Author:** ![droid](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/54ee81/32.png) [@droid](https://forum.hacf.fr/u/droid)\
**Post date:** [Décembre 1, 2025, 6:08 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/3 "2025-12-01T06:08:43Z")

</div>

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

```yaml
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

---

<div class="post-metadata">

**Author:** ![btncrd](https://forum.hacf.fr/user_avatar/forum.hacf.fr/btncrd/32/106719_2.png) [@btncrd](https://forum.hacf.fr/u/btncrd)\
**Post date:** [Décembre 1, 2025, 6:27 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/4 "2025-12-01T06:27:17Z")

</div>

Bonjour,

Vire la ligne «&nbsp;- filter:&nbsp;» 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.

---

<div class="post-metadata">

**Author:** ![droid](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/54ee81/32.png) [@droid](https://forum.hacf.fr/u/droid)\
**Post date:** [Décembre 1, 2025, 8:18 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/5 "2025-12-01T08:18:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![btncrd](https://forum.hacf.fr/user_avatar/forum.hacf.fr/btncrd/32/106719_2.png) [@btncrd](https://forum.hacf.fr/u/btncrd)\
**Post date:** [Décembre 1, 2025, 8:23 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/6 "2025-12-01T08:23:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![droid](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/54ee81/32.png) [@droid](https://forum.hacf.fr/u/droid)\
**Post date:** [Décembre 1, 2025, 8:36 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/7 "2025-12-01T08:36:53Z")

</div>

![image](https://forum.hacf.fr/uploads/default/original/3X/a/d/ad910a0add59735285a7feeee09570798c1882fc.png)

```yaml
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

---

<div class="post-metadata">

**Author:** ![btncrd](https://forum.hacf.fr/user_avatar/forum.hacf.fr/btncrd/32/106719_2.png) [@btncrd](https://forum.hacf.fr/u/btncrd)\
**Post date:** [Décembre 1, 2025, 8:52 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/8 "2025-12-01T08:52:45Z")

</div>

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 «&nbsp;- background: url(‹&nbsp;/local/images/bouttons/boutton00\_retail.png&nbsp;›)&nbsp;» «&nbsp;- background-color: transparent&nbsp;» en l’alignant correctement.

---

<div class="post-metadata">

**Author:** ![droid](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/54ee81/32.png) [@droid](https://forum.hacf.fr/u/droid)\
**Post date:** [Décembre 1, 2025, 10:23 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/9 "2025-12-01T10:23:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Bob](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bob/32/64908_2.png) [@Bob](https://forum.hacf.fr/u/Bob)\
**Post date:** [Décembre 1, 2025, 10:28 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/10 "2025-12-01T10:28:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![btncrd](https://forum.hacf.fr/user_avatar/forum.hacf.fr/btncrd/32/106719_2.png) [@btncrd](https://forum.hacf.fr/u/btncrd)\
**Post date:** [Décembre 1, 2025, 10:28 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/11 "2025-12-01T10:28:48Z")

</div>

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 :

```yaml
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](https://www.hacf.fr/custom-button-card/)

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Décembre 1, 2025, 11:16 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/12 "2025-12-01T11:16:35Z")

</div>

> [@btncrd](#):
>
> ```auto
> - "--mdc-ripple-fg-size": 0px
> - "--mdc-ripple-fg-opacity": 0
> - "--mdc-ripple-color": transparent
> 
> ```

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

> **[Ripple/Hover Effect - custom:button-card documentation](https://custom-cards.github.io/button-card/stable/advanced/ripple/?h=ripple#ripple-and-hover-color-css-variables-names)**

---

<div class="post-metadata">

**Author:** ![btncrd](https://forum.hacf.fr/user_avatar/forum.hacf.fr/btncrd/32/106719_2.png) [@btncrd](https://forum.hacf.fr/u/btncrd)\
**Post date:** [Décembre 1, 2025, 11:22 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/13 "2025-12-01T11:22:23Z")

</div>

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](https://forum.hacf.fr/uploads/default/original/3X/0/c/0ce865b089d5077fb92e07e67d5459ea8f01614a.png)

Avec la carte à 120x120 px :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/d/9/d93892401a6384dd0e9ecaf69a396e16cf63260e.png)

Avec un custom\_fields :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/d/0/d07c9268bc83e0b7fc96d35451e9cd84f8fba039.png)

---

<div class="post-metadata">

**Author:** ![droid](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/54ee81/32.png) [@droid](https://forum.hacf.fr/u/droid)\
**Post date:** [Décembre 1, 2025, 1:06 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/14 "2025-12-01T13:06:36Z")

</div>

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 !!!

---

<div class="post-metadata">

**Author:** ![droid](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/54ee81/32.png) [@droid](https://forum.hacf.fr/u/droid)\
**Post date:** [Décembre 1, 2025, 1:08 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/15 "2025-12-01T13:08:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![droid](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/54ee81/32.png) [@droid](https://forum.hacf.fr/u/droid)\
**Post date:** [Décembre 1, 2025, 1:10 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/16 "2025-12-01T13:10:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![btncrd](https://forum.hacf.fr/user_avatar/forum.hacf.fr/btncrd/32/106719_2.png) [@btncrd](https://forum.hacf.fr/u/btncrd)\
**Post date:** [Décembre 1, 2025, 1:12 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/17 "2025-12-01T13:12:16Z")

</div>

Voici le code avec un custom\_fields :

```yaml
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.

---

<div class="post-metadata">

**Author:** ![droid](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/54ee81/32.png) [@droid](https://forum.hacf.fr/u/droid)\
**Post date:** [Décembre 1, 2025, 2:34 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/18 "2025-12-01T14:34:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![btncrd](https://forum.hacf.fr/user_avatar/forum.hacf.fr/btncrd/32/106719_2.png) [@btncrd](https://forum.hacf.fr/u/btncrd)\
**Post date:** [Décembre 1, 2025, 2:39 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/19 "2025-12-01T14:39:07Z")

</div>

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é :

```yaml
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) :

```yaml
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

```

---

<div class="post-metadata">

**Author:** ![droid](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/54ee81/32.png) [@droid](https://forum.hacf.fr/u/droid)\
**Post date:** [Décembre 1, 2025, 2:48 UTC](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307/20 "2025-12-01T14:48:42Z")

</div>

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

[Page suivante](https://forum.hacf.fr/t/ombre-sous-le-button-card/71307.md?page=2)