Lovelace: Button card

I mean the background of the icon or img cell.

Hey guys, Iā€™ve been searching for a way to change the background color of one of my button cards automatically every few seconds. More specifically; I would like to have the background color slowly fade into another color, kind of like the Philips HUE lights fading effect.

I found the extra_styling option and the pulse animation option but Iā€™m not sure if this is the correct way for me to do it.

Anybody know of a way to create this effect? Any help is much appreciated!!

@Jordi83
The github has a perfect example for that: Injecting CSS with extra styles
Just readup on CSS for all the fun stuff you can do. From my own experience i know how hard that can be if you havent worked with CSS yes. So here is an example i made.

type: custom:button-card
card:
styles:
  card:
    - animation: bgcolorswap 10s linear infinite
extra_styles: >
  @keyframes bgcolorswap {
    0% {
      background-color: red;
    }
    25% {
      background-color: green;
    }
    50% {
      background-color: yellow;
    }
    75% {
      background-color: blue;
    }
    100% {
      background-color: purple;
    }
   }

This will rotate between all the colors, remeber to end with the start color or it will snap.
(you can add more, just divide up the percentage. (instead of 25% steps you can do 10 steps of 10% .)
The 10 seconds is how long the whole animation will take. Infinite is just that. will loop forever.

Hi thanks for your response! hopefully i formated everythign correctly. Here is the code im using for the card:


type: grid
cards:
  - type: weather-forecast
    entity: weather.harwood_drive
    show_forecast: false
  - type: grid
    cards:
      - type: button
        tap_action:
          action: call-service
          service: switch.toggle
          service_data: {}
          target:
            device_id: 6417129118116af69721b40c498bb89a
        show_state: true
        entity: switch.garagedoor_sensor
        name: Garage Door
        icon: mdi:garage-variant
      - type: button
        tap_action:
          action: toggle
        entity: lock.front_door_lock
        name: Front Door Lock
        icon: mdi:door
        show_state: true
      - type: button
        tap_action:
          action: toggle
        entity: light.den_8_keylinc_outside_light
        name: Outside Sconce Light
        icon: mdi:coach-lamp
      - type: button
        tap_action:
          action: toggle
        entity: switch.outside_deck_spot_lights
        name: Patio Spot Lights
        icon: mdi:track-light
        show_state: false
    columns: 4
    square: false
  - type: grid
    cards:
      - type: picture-entity
        entity: camera.back_door
        image: https://demo.home-assistant.io/stub_config/bedroom.png
        camera_view: live
        show_state: false
        show_name: false
      - type: picture-entity
        entity: camera.front_door
        image: https://demo.home-assistant.io/stub_config/bedroom.png
        camera_view: live
        show_state: false
        show_name: false
    columns: 2
    square: false
  - type: grid
    cards:
      - template: room
        type: custom:decluttering-card
        variables:
          - entity: climate.upstairs
          - icon: sofa
          - name: LIVING ROOM
          - show_icon: false
          - temp_ent: climate.upstairs
          - stat1_icon: thermometer
          - stat1_pre: 'Temp: '
          - stat1_suf: Ā°
          - stat1_ent: sensor.upstairs_temperature
          - stat2_icon: water-percent
          - stat2_pre: 'Hum: '
          - stat2_suf: '%'
          - stat2_ent: sensor.upstairs_humidity
          - icon1_ent: binary_sensor.den_rear_door
          - icon1_name: Door
          - icon1_tapaction: more-info
          - icon1_holdaction: more-info
          - icon1_colortype: null
          - icon1_color1: tomato
          - icon1_color2: null
          - icon1_color3: red
          - icon1_animate: blink 2s ease infinite
          - icon1_state1: Open
          - icon1_state2: Closed
          - icon1_state3: unknown
          - icon1_icon1: shield-off
          - icon1_icon2: door
          - icon1_icon3: help-circle
          - icon2_ent: binary_sensor.office_motion
          - icon2_name: Motion
          - icon2_tapaction: more-info
          - icon2_holdaction: more-info
          - icon2_colortype: null
          - icon2_color1: coral
          - icon2_color2: null
          - icon2_color3: red
          - icon2_animate: null
          - icon2_state1: 'Yes'
          - icon2_state2: 'No'
          - icon2_state3: unknown
          - icon2_icon1: motion-sensor
          - icon2_icon2: walk
          - icon2_icon3: help-circle
          - icon3_ent: switch.garage_light
          - icon3_name: LR TV
          - icon3_tapaction: toggle
          - icon3_holdaction: more-info
          - icon3_colortype: null
          - icon3_color1: mediumseagreen
          - icon3_color2: null
          - icon3_color3: red
          - icon3_animate: blink 2s ease infinite
          - icon3_state1: 'on'
          - icon3_state2: 'off'
          - icon3_state3: unknown
          - icon3_icon1: television-guide
          - icon3_icon2: television
          - icon3_icon3: help-circle
          - icon4_ent: switch.garage_light
          - icon4_name: LR Fan
          - icon4_tapaction: more-info
          - icon4_holdaction: more-info
          - icon4_colortype: null
          - icon4_color1: darkolivegreen
          - icon4_color2: null
          - icon4_color3: red
          - icon4_animate: blink 2s ease infinite
          - icon4_state1: 'on'
          - icon4_state2: 'off'
          - icon4_state3: unknown
          - icon4_icon1: weather-windy
          - icon4_icon2: fan
          - icon4_icon3: help-circle
          - icon5_ent: binary_sensor.baby_room_left
          - icon5_name: Windows
          - icon5_tapaction: more-info
          - icon5_holdaction: more-info
          - icon5_colortype: null
          - icon5_color1: tomato
          - icon5_color2: null
          - icon5_color3: red
          - icon5_animate: blink 2s ease infinite
          - icon5_state1: Open
          - icon5_state2: Closed
          - icon5_state3: unknown
          - icon5_icon1: window-open
          - icon5_icon2: window-closed
          - icon5_icon3: help-circle
          - pu_title: Living Room
          - pu_light1_ent: switch.garage_light
          - pu_light1_name: Overheads
          - pu_light1_colortype: icon
          - pu_light2_ent: switch.garage_light
          - pu_light2_name: Spots
          - pu_light2_colortype: icon
          - pu_climate_ent: climate.living_room_thermostat
          - pu_climate_hum: sensor.upstairs_humidity
          - pu_climate_temp: sensor.upstairs_temperature
      - template: room
        type: custom:decluttering-card
        variables:
          - entity: null
          - icon: bed
          - name: Master Bedroom
          - show_icon: false
          - temp_ent: climate.upstairs
          - stat1_icon: thermometer
          - stat1_pre: 'Temp: '
          - stat1_suf: Ā°
          - stat1_ent: sensor.upstairs_temperature
          - stat2_icon: water-percent
          - stat2_pre: 'Hum: '
          - stat2_suf: '%'
          - stat2_ent: sensor.upstairs_humidity
          - icon1_ent: light.master_bedroom_lights_jackie
          - icon1_name: Jackie Side High Hats
          - icon1_tapaction: more-info
          - icon1_holdaction: more-info
          - icon1_colortype: null
          - icon1_color1: tomato
          - icon1_color2: null
          - icon1_color3: red
          - icon1_animate: blink 2s ease infinite
          - icon1_state1: 'on'
          - icon1_state2: 'off'
          - icon1_state3: unknown
          - icon1_icon1: lightbulb-on
          - icon1_icon2: lightbulb
          - icon1_icon3: help-circle
          - icon2_ent: light.master_bedroom_lights_mike
          - icon2_name: Mike Side High Hats
          - icon2_tapaction: more-info
          - icon2_holdaction: more-info
          - icon2_colortype: null
          - icon2_color1: coral
          - icon2_color2: null
          - icon2_color3: red
          - icon2_animate: blink 2s ease infinite
          - icon2_state1: 'on'
          - icon2_state2: 'off'
          - icon2_state3: unknown
          - icon2_icon1: lightbulb-on
          - icon2_icon2: lightbulb
          - icon2_icon3: help-circle
          - icon3_ent: light.master_bedroom_mantel_hat
          - icon3_name: Mantel High Hats
          - icon3_tapaction: toggle
          - icon3_holdaction: more-info
          - icon3_colortype: null
          - icon3_color1: mediumseagreen
          - icon3_color2: null
          - icon3_color3: red
          - icon3_animate: blink 2s ease infinite
          - icon3_state1: 'on'
          - icon3_state2: 'off'
          - icon3_state3: unknown
          - icon3_icon1: fireplace-off
          - icon3_icon2: fireplace-off
          - icon3_icon3: help-circle
          - icon4_ent: light.master_bathroom_light
          - icon4_name: Master Bath Light
          - icon4_tapaction: more-info
          - icon4_holdaction: more-info
          - icon4_colortype: null
          - icon4_color1: darkolivegreen
          - icon4_color2: null
          - icon4_color3: red
          - icon4_animate: blink 2s ease infinite
          - icon4_state1: 'on'
          - icon4_state2: 'off'
          - icon4_state3: unknown
          - icon4_icon1: paper-roll
          - icon4_icon2: paper-roll
          - icon4_icon3: help-circle
          - icon5_ent: binary_sensor.baby_room_left
          - icon5_name: Windows
          - icon5_tapaction: more-info
          - icon5_holdaction: more-info
          - icon5_colortype: null
          - icon5_color1: tomato
          - icon5_color2: null
          - icon5_color3: red
          - icon5_animate: blink 2s ease infinite
          - icon5_state1: Open
          - icon5_state2: Closed
          - icon5_state3: unknown
          - icon5_icon1: window-open
          - icon5_icon2: window-closed
          - icon5_icon3: help-circle
          - pu_title: Living Room
          - pu_light1_ent: switch.garage_light
          - pu_light1_name: Overheads
          - pu_light1_colortype: icon
          - pu_light2_ent: switch.garage_light
          - pu_light2_name: Spots
          - pu_light2_colortype: icon
          - pu_climate_ent: climate.living_room_thermostat
          - pu_climate_hum: sensor.upstairs_humidity
          - pu_climate_temp: sensor.upstairs_temperature
      - template: room
        type: custom:decluttering-card
        variables:
          - entity: climate.upstairs
          - icon: sofa
          - name: LIVING ROOM
          - show_icon: false
          - temp_ent: climate.upstairs
          - stat1_icon: thermometer
          - stat1_pre: 'Temp: '
          - stat1_suf: Ā°
          - stat1_ent: sensor.upstairs_temperature
          - stat2_icon: water-percent
          - stat2_pre: 'Hum: '
          - stat2_suf: '%'
          - stat2_ent: sensor.upstairs_humidity
          - icon1_ent: binary_sensor.den_rear_door
          - icon1_name: Door
          - icon1_tapaction: more-info
          - icon1_holdaction: more-info
          - icon1_colortype: null
          - icon1_color1: tomato
          - icon1_color2: null
          - icon1_color3: red
          - icon1_animate: blink 2s ease infinite
          - icon1_state1: Open
          - icon1_state2: Closed
          - icon1_state3: unknown
          - icon1_icon1: shield-off
          - icon1_icon2: door
          - icon1_icon3: help-circle
          - icon2_ent: binary_sensor.office_motion
          - icon2_name: Motion
          - icon2_tapaction: more-info
          - icon2_holdaction: more-info
          - icon2_colortype: null
          - icon2_color1: coral
          - icon2_color2: null
          - icon2_color3: red
          - icon2_animate: null
          - icon2_state1: 'Yes'
          - icon2_state2: 'No'
          - icon2_state3: unknown
          - icon2_icon1: motion-sensor
          - icon2_icon2: walk
          - icon2_icon3: help-circle
          - icon3_ent: switch.garage_light
          - icon3_name: LR TV
          - icon3_tapaction: toggle
          - icon3_holdaction: more-info
          - icon3_colortype: null
          - icon3_color1: mediumseagreen
          - icon3_color2: null
          - icon3_color3: red
          - icon3_animate: blink 2s ease infinite
          - icon3_state1: 'on'
          - icon3_state2: 'off'
          - icon3_state3: unknown
          - icon3_icon1: television-guide
          - icon3_icon2: television
          - icon3_icon3: help-circle
          - icon4_ent: switch.garage_light
          - icon4_name: LR Fan
          - icon4_tapaction: more-info
          - icon4_holdaction: more-info
          - icon4_colortype: null
          - icon4_color1: darkolivegreen
          - icon4_color2: null
          - icon4_color3: red
          - icon4_animate: blink 2s ease infinite
          - icon4_state1: 'on'
          - icon4_state2: 'off'
          - icon4_state3: unknown
          - icon4_icon1: weather-windy
          - icon4_icon2: fan
          - icon4_icon3: help-circle
          - icon5_ent: binary_sensor.baby_room_left
          - icon5_name: Windows
          - icon5_tapaction: more-info
          - icon5_holdaction: more-info
          - icon5_colortype: null
          - icon5_color1: tomato
          - icon5_color2: null
          - icon5_color3: red
          - icon5_animate: blink 2s ease infinite
          - icon5_state1: Open
          - icon5_state2: Closed
          - icon5_state3: unknown
          - icon5_icon1: window-open
          - icon5_icon2: window-closed
          - icon5_icon3: help-circle
          - pu_title: Living Room
          - pu_light1_ent: switch.garage_light
          - pu_light1_name: Overheads
          - pu_light1_colortype: icon
          - pu_light2_ent: switch.garage_light
          - pu_light2_name: Spots
          - pu_light2_colortype: icon
          - pu_climate_ent: climate.living_room_thermostat
          - pu_climate_hum: sensor.upstairs_humidity
          - pu_climate_temp: sensor.upstairs_temperature
    columns: 4
    square: true
square: false
columns: 1

here is the code im using for the template which i pasted using the ā€œRaw Configuration Editorā€ not sure if i did this correctly. Any help you can provide is extremely apricated!!

decluttering_templates:
  room:
    card:
      custom_fields:
        icon1: |
          [[[
            if (states['[[icon1_ent]]'].state == '[[icon1_state1]]')
              return '<ha-icon icon="mdi:[[icon1_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon1_ent]]'].state == '[[icon1_state2]]')
              return '<ha-icon icon="mdi:[[icon1_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon1_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]   
        icon2: |
          [[[
            if (states['[[icon2_ent]]'].state == '[[icon2_state1]]')
              return '<ha-icon icon="mdi:[[icon2_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon2_ent]]'].state == '[[icon2_state2]]')
              return '<ha-icon icon="mdi:[[icon2_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon2_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]     
        icon3: |
          [[[
            if (states['[[icon3_ent]]'].state == '[[icon3_state1]]')
              return '<ha-icon icon="mdi:[[icon3_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon3_ent]]'].state == '[[icon3_state2]]')
              return '<ha-icon icon="mdi:[[icon3_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon3_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]       
        icon4: |
          [[[
            if (states['[[icon4_ent]]'].state == '[[icon4_state1]]')
              return '<ha-icon icon="mdi:[[icon4_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon4_ent]]'].state == '[[icon4_state2]]')
              return '<ha-icon icon="mdi:[[icon4_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon4_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]   
        icon5: |
          [[[
            if (states['[[icon5_ent]]'].state == '[[icon5_state1]]')
              return '<ha-icon icon="mdi:[[icon5_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[icon5_ent]]'].state == '[[icon5_state2]]')
              return '<ha-icon icon="mdi:[[icon5_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon5_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]
        icon6: |
          [[[
            if (states['[[temp_ent]]'].state == "heat")
              return '<ha-icon icon="mdi:fire" style="width: 20px; height: 20px;"></ha-icon>';
            if (states['[[temp_ent]]'].state == "cool")
              return '<ha-icon icon="mdi:snowflake" style="width: 20px; height: 20px;"></ha-icon>';
            else 
              return '<ha-icon icon="mdi:[[icon]]" style="width: 20px; height: 20px;"></ha-icon>';
          ]]]                      
        stat1: |
          [[[
            return `<ha-icon
              icon="mdi:[[stat1_icon]]"
              style="width: 15px; height: 15px; color: steelblue;">
              </ha-icon><span>[[stat1_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat1_ent]]'].state}[[stat1_suf]]</span></span>`
          ]]]   
        stat2: |
          [[[
            return `<ha-icon
              icon="mdi:[[stat2_icon]]"
              style="width: 15px; height: 15px; color: steelblue;">
              </ha-icon><span>[[stat2_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat2_ent]]'].state}[[stat2_suf]]</span></span>`
          ]]]  
      entity: '[[entity]]'
      name: '[[name]]'
      show_icon: false
      show_label: false
      show_state: false
      size: 70%
      state:
        - styles:
            custom_fields:
              icon6:
                - animation: blink 2s ease infinite
                - color: crimson
          value: heat
        - styles:
            custom_fields:
              icon6:
                - animation: blink 2s ease infinite
                - color: lightblue
          value: cool
      styles:
        card:
          - font-size: 12px
          - padding: 5px 3px 5px 3px
        custom_fields:
          icon1:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_animate]]";                 
                  else return null;
                ]]]                   
            - color: |
                [[[ 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_color1]]"; 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state2]]') return "[[icon1_color2]]"; 
                  if (states["[[icon1_ent]]"].state == '[[icon1_state3]]') return "[[icon1_color3]]";                   
                  else return null;
                ]]]            
          icon2:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_animate]]";                 
                  else return null;
                ]]]                   
            - color: |
                [[[ 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_color1]]"; 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state2]]') return "[[icon2_color2]]"; 
                  if (states["[[icon2_ent]]"].state == '[[icon2_state3]]') return "[[icon2_color3]]";                   
                  else return null;
                ]]]                    
          icon3:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_animate]]";                 
                  else return null;
                ]]]                
            - color: |
                [[[ 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_color1]]"; 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state2]]') return "[[icon3_color2]]"; 
                  if (states["[[icon3_ent]]"].state == '[[icon3_state3]]') return "[[icon3_color3]]";
                  else return null;
                ]]]                    
          icon4:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_animate]]";                 
                  else return null;
                ]]]                
            - color: |
                [[[ 

                  if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_color1]]"; 
                  if (states["[[icon4_ent]]"].state == '[[icon4_state2]]') return "[[icon4_color2]]"; 
                  if (states["[[icon4_ent]]"].state == '[[icon4_state3]]') return "[[icon4_color3]]";    
                  else return null;
                ]]]                    
          icon5:
            - padding: 0px 0px 0px 0px
            - animation: |
                [[[ 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_animate]]";                 
                  else return null;
                ]]]                
            - color: |
                [[[ 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_color1]]"; 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state2]]') return "[[icon5_color2]]"; 
                  if (states["[[icon5_ent]]"].state == '[[icon5_state3]]') return "[[icon5_color3]]";                   
                  else return null;
                ]]]   
          icon6:
            - padding: 0px 0px 0px 0px
          stat1:
            - justify-self: start
            - padding: 0px 0px 0px 0px
            - '--text-color-sensor': |
                [[[ 
                  if (states["[[stat1_ent]]"].state < 20) return "lightblue"; 
                  if (states["[[stat1_ent]]"].state >= 20 && states["[[stat1_ent]]"].state < 28) return "mediumaquamarine"; 
                  else return "tomato";
                ]]]
          stat2:
            - justify-self: start
            - padding: 0px 0px 0px 0px
            - '--text-color-sensor': |
                [[[ 
                  if (states["[[stat2_ent]]"].state < 30) return "lightblue"; 
                  if (states["[[stat2_ent]]"].state >= 30 && states["[[stat2_ent]]"].state < 55) return "mediumaquamarine"; 
                  else return "tomato";
                ]]]                   
        grid:
          - grid-template-areas: >-
              ". n n n n icon6 ." ". stat1 stat1 stat1 stat1 stat1 ." ". stat2
              stat2 stat2 stat2 stat2 ." ". icon1 icon2 icon3 icon4 icon5 ."
          - grid-template-columns: 1fr 5fr 5fr 5fr 5fr 5fr 1fr
          - grid-template-rows: 2fr 1fr 1fr 3fr
          - padding: 0px 0px 0px 0px
        icon:
          - place-self: center
          - padding: 0px 0px 3px 0px
        name:
          - justify-self: start
          - font-size: 16px
          - padding: 0px 0px 0px 3px
      tap_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          card:
            cards:
              - cards:
                  - cards:
                      - cards:
                          - color_type: '[[pu_light1_colortype]]'
                            dbltap_action:
                              action: more-info
                            entity: '[[pu_light1_ent]]'
                            hold_action:
                              action: more-info
                            name: '[[pu_light1_name]]'
                            show_last_changed: true
                            show_state: false
                            size: 40%
                            styles:
                              card:
                                - height: 70px
                                - padding: 0px 0px 0px 0px
                              grid:
                                - grid-template-areas: '"i ." "i n" "i l" "i ."'
                                - grid-template-columns: 2fr 3fr
                                - grid-template-rows: 1fr 3fr 1fr 1fr
                              icon:
                                - padding: 4px 0px 8px 10px
                              label:
                                - font-size: 11px
                                - padding: 0px 25px 20px 0px
                                - justify-self: right
                                - color: '#7babf7'
                                - align-self: start
                              name:
                                - font-size: 20px
                                - justify-self: right
                                - padding: 0px 25px 0px 0px
                                - align-self: start
                            tap_action:
                              action: toggle
                            type: custom:button-card
                          - color_type: '[[pu_light2_colortype]]'
                            dbltap_action:
                              action: more-info
                            entity: '[[pu_light2_ent]]'
                            hold_action:
                              action: more-info
                            name: '[[pu_light2_name]]'
                            show_last_changed: true
                            show_state: false
                            size: 40%
                            styles:
                              card:
                                - height: 70px
                                - padding: 0px 0px 0px 0px
                              grid:
                                - grid-template-areas: '"i ." "i n" "i l" "i ."'
                                - grid-template-columns: 2fr 3fr
                                - grid-template-rows: 1fr 3fr 1fr 1fr
                              icon:
                                - padding: 4px 0px 8px 10px
                              label:
                                - font-size: 11px
                                - padding: 0px 25px 20px 0px
                                - justify-self: right
                                - color: '#7babf7'
                                - align-self: start
                              name:
                                - font-size: 20px
                                - justify-self: right
                                - padding: 0px 25px 0px 0px
                                - align-self: start
                            tap_action:
                              action: toggle
                            type: custom:button-card
                        type: horizontal-stack
                    type: custom:vertical-stack-in-card
                type: horizontal-stack
              - cards:
                  - color_type: '[[icon1_colortype]]'
                    entity: '[[icon1_ent]]'
                    hold_action:
                      action: '[[icon1_holdaction]]'
                    icon: mdi:[[icon1_icon2]]
                    name: '[[icon1_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: mdi:[[icon1_icon1]]
                        styles:
                          icon:
                            - color: '[[icon1_color1]]'
                            - animation: '[[icon1_animate]]'
                        value: '[[icon1_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon1_tapaction]]'
                    type: custom:button-card
                  - color_type: '[[icon2_colortype]]'
                    entity: '[[icon2_ent]]'
                    hold_action:
                      action: '[[icon2_holdaction]]'
                    icon: mdi:[[icon2_icon2]]
                    name: '[[icon2_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: mdi:[[icon2_icon1]]
                        styles:
                          icon:
                            - color: '[[icon2_color1]]'
                            - animation: '[[icon2_animate]]'
                        value: '[[icon2_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon2_tapaction]]'
                    type: custom:button-card
                  - color_type: '[[icon3_colortype]]'
                    entity: '[[icon3_ent]]'
                    hold_action:
                      action: '[[icon3_holdaction]]'
                    icon: mdi:[[icon3_icon2]]
                    name: '[[icon3_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: mdi:[[icon3_icon1]]
                        styles:
                          icon:
                            - color: '[[icon3_color1]]'
                            - animation: '[[icon3_animate]]'
                        value: '[[icon3_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon3_tapaction]]'
                    type: custom:button-card
                  - color_type: '[[icon4_colortype]]'
                    entity: '[[icon4_ent]]'
                    hold_action:
                      action: '[[icon4_holdaction]]'
                    icon: mdi:[[icon4_icon2]]
                    name: '[[icon4_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: mdi:[[icon4_icon1]]
                        styles:
                          icon:
                            - color: '[[icon4_color1]]'
                            - animation: '[[icon4_animate]]'
                        value: '[[icon4_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon4_tapaction]]'
                    type: custom:button-card
                  - color_type: '[[icon5_colortype]]'
                    entity: '[[icon5_ent]]'
                    hold_action:
                      action: '[[icon5_holdaction]]'
                    icon: mdi:[[icon5_icon2]]
                    name: '[[icon5_name]]'
                    show_last_changed: true
                    show_state: false
                    size: 70%
                    state:
                      - icon: mdi:[[icon5_icon1]]
                        styles:
                          icon:
                            - color: '[[icon5_color1]]'
                            - animation: '[[icon5_animate]]'
                        value: '[[icon5_state1]]'
                    styles:
                      card:
                        - height: 120px
                      icon:
                        - color: null
                      label:
                        - font-size: 9px
                        - color: '#7babf7'
                    tap_action:
                      action: '[[icon5_tapaction]]'
                    type: custom:button-card
                type: horizontal-stack
              - color_type: '[[pu_therm_colortype]]'
                custom_fields:
                  cardy:
                    card:
                      entity: '[[pu_climate_ent]]'
                      hide:
                        state: true
                      icon:
                        cool: mdi:snowflake
                        heating: mdi:fire
                        'off': mdi:stop-circle-outline
                      modes:
                        cool: null
                        heating: null
                        'off': null
                      name: Thermostat
                      sensors:
                        - attribute: hvac_action
                          entity: '[[pu_climate_ent]]'
                          name: Currently
                        - entity: '[[pu_climate_hum]]'
                          name: Humidity
                      type: custom:simple-thermostat
                entity: light.curtis
                show_icon: false
                show_name: false
                styles:
                  grid:
                    - grid-template-areas: '"cardy"'
                    - grid-template-columns: 1fr
                    - grid-template-rows: 1fr
                type: custom:button-card
              - cards:
                  - align_header: left
                    align_icon: left
                    animate: true
                    entities:
                      - color: '#f2ab48'
                        entity: '[[pu_climate_temp]]'
                        index: 0
                        name: LR
                    font_size: 80
                    hours_to_show: 48
                    name: Temperature - 48h
                    points_per_hour: 0.25
                    show:
                      fill: false
                      labels: true
                      points: hover
                    type: custom:mini-graph-card
                  - align_header: left
                    align_icon: left
                    animate: true
                    entities:
                      - color: '#57a5f2'
                        entity: '[[pu_climate_hum]]'
                        index: 0
                        name: LR
                    font_size: 80
                    hours_to_show: 48
                    name: Humidity - 48h
                    points_per_hour: 0.25
                    show:
                      fill: false
                      labels: true
                      points: hover
                    type: custom:mini-graph-card
                type: horizontal-stack
            type: custom:vertical-stack-in-card
          deviceID:
            - this
          large: false
          title: '[[pu_title]]'
      triggers_update:
        - '[[icon1_ent]]'
        - '[[icon2_ent]]'
        - '[[icon3_ent]]'
        - '[[icon4_ent]]'
        - '[[icon5_ent]]'
        - '[[icon6_ent]]'
        - '[[stat1_ent]]'
        - '[[stat2_ent]]'
        - '[[pu_light1_ent]]'
        - '[[pu_light2_ent]]'
      type: custom:button-card

Thanks for posting and the formatting. I now see where youā€™re using browser-mod. Your issue is most probably with its syntax. You should check the corresponding forum thread or documentation.

If I remember correctly, there was a change with browser_mod and the call service.

See here:

My code to call a pop-up is like this:

type: custom:button-card
          entity: 'input_boolean.nap_mode'
          icon: mdi:sleep
          aspect_ratio: 1/1
          name: Nap
          hold_action: 
            action: fire-dom-event
            browser_mod:
              command: popup
              title: Timer Napmodus
              deviceID:
                - this
              card:
                type: entities
                entities:
                  - entity: input_datetime.timer_nap_mode
                  - entity: timer.nap_mode_active
                  - entity: input_boolean.nap_mode_timer_on

Thank you so much Dujith! I will try this our later today. Much appreciated.

I have created several buttons card, but for some reason, the Icon color is not working for me in this card only. It is still showing a blue icon. My cards are fairly similiar, so I assume it is something minor I canā€™t see. Can you please assist.

type: custom:button-card
entity: switch.drive_gates
tap_action:
  action: toggle
show_state: false
icon: mdi:car
color: green
size: 15%
label: Closed
show_label: true
styles:
  card:
    - '--mdc-ripple-color': red
    - '--mdc-ripple-press-opacity': 0.5
  grid:
    - grid-template-areas: '"n" "i" "s" "l"'
name: Drive Gates

I assume you want to have a green icon?
Try adding icon to the styles section:

styles:
  icon:
    - color: green

Hi there,
i donā€™t know if itā€™s possible to do what i want:

Iā€™m using emoji as icon and i want to know if itā€™s possible to modify their size.

image

    label: |
      [[[
        return 'šŸŽ¼';
      ]]]

Yes thatā€™s possible using styles and font-size:

label: |
      [[[
        return 'šŸŽ¼';
      ]]]
styles:
  label:
    - font-size: 200px
1 Like

Great! Thank you

Thanks for your prompt reply. Im not sure what exactly needs to be changed and if the change needs to be made in the button card it self in the love lace raw code. are you able to give me an example using the code i provided?

If anyone is interested im willing to compensate for help programming my HA system. Im fairly new to HA and could use a little help with customization.

You need to modify your template which you have in the raw configuration editor. Wherever you have

tap-action:
  action: call-service
    service: browser_mod.popup
    service_data:
      card:
        xxxx
    deviceID: this

you need to use the following:

tap-action:
  action: fire-dom-event
  browser_mod:
    command: popup
      card:
        xxxx

Basically, whenever you have browser-mod_popup in your code, it needs to be replaced with the new syntax.

Thanks to the comment of Hekm77 the solution is terrifying simple:

styles:
  img_cell:
    - background: |
        [[[
           return 'rgb(' + entity.attributes.rgb_color + ',0.2)'
        ]]]

Greetings all! :slightly_smiling_face:
I am completely new to using templates/variables with my button cards, but can already see so many possibilities. Unfortunately, I just canā€™t seem to understand how to make them work. (At all :rofl:). While the following obviously isnā€™t correct, it will hopefully explain what I was trying to accomplish:

type: custom:button-card
entity: light.den_lamp
tap_action:
  action: |
    [[[
      if [light.den_lamp] is already on
        call-service: light.turn_off
      else
        call-service: light.turn_on
        service_data:
          - brightness_pct: 70
          - color_temp: 273
    ]]]

I ultimately have this working through a combination of an empty script and Node-Red, but if someone could perhaps show me the way it SHOULD be written it would definitely help me learn (and hopefully others as well) :slightly_smiling_face:
Thanks!

@Jordi83 Thank you so much. It worked perfectly.

1 Like

I donā€™t think tap_action allows templating in its configuration. How about you use tap_action for turning the light on with its brightness and color_temp settings and use hold_action or double_tap_action for turning the light off?

Or use light.toggle as service for tap_action. This leaves out the brightness and temp settings thoughā€¦