Fun with custom:button-card

Hello eveyrone,

I recently started playing with a custom made dashboard that I found online.
It has these nice custom button cards that I saw posted by some other people here too.
Screenshot 2024-06-10 204505

I have some custom made countdown timers for specific devices. Is there a way I could have the timer shown in the circle and the circle to react to the timer until it finishes and the circle disappears?

If so can someone share some code? Thanks in advance!

type: custom:button-card
name: Dämmerung
icon: mdi:weather-sunset
entity: input_number.tageszeit

show_label: false
show_state: false
styles:
  grid:
    - grid-template-areas: '"i n arrow" "i s arrow"'
    - grid-template-columns: 60px 1fr 20px
  icon:
    - width: 30px
    - color: black
  img_cell:
    - background: '#FF7F3E'
    - border-radius: 515px
    - width: 50px
    - height: 50px
  name:
    - justify-self: start
    - font-size: 14px
    - font-weight: 500
    - padding-left: 10px
  card:
    - margin: 0
    - border-radius: 50px
    - padding: 12px 14px 12px 4px
  state:
    - justify-self: start
    - font-size: 14px
    - color: null
    - opacity: '0.8'
    - padding-left: 10px
  custom_fields:
    arrow:
      - justify-self: end
      - font-size: 14px
      - color: black
      - opacity: '0.7'

is it possible to change the img_cell color based on the number value on my number helper, here on number 1 show color orange else show img_cell color green

Like this?

type: custom:button-card
name: Dämmerung
icon: mdi:weather-sunset
entity: input_number.tageszeit

show_label: false
show_state: false
styles:
  grid:
    - grid-template-areas: '"i n arrow" "i s arrow"'
    - grid-template-columns: 60px 1fr 20px
  icon:
    - width: 30px
    - color: black
  img_cell:
    - background: |
       [[[    if (entity.state < 50) return '#FF7F3E';
              if (entity.state >= 50 && entity.state < 75) return 'yellow';
                 else return 'lime';  ]]]
    - border-radius: 515px
    - width: 50px
    - height: 50px
  name:
    - justify-self: start
    - font-size: 14px
    - font-weight: 500
    - padding-left: 10px
  card:
    - margin: 0
    - border-radius: 50px
    - padding: 12px 14px 12px 4px
  state:
    - justify-self: start
    - font-size: 14px
    - color: null
    - opacity: '0.8'
    - padding-left: 10px
  custom_fields:
    arrow:
      - justify-self: end
      - font-size: 14px
      - color: black
      - opacity: '0.7'
1 Like

yea, better but it is a static value so my Problem ist now:
on value 2 yellow
on value 1 (under) black and 3 (above) also black
ty for the fast answer

  img_cell:
    - background: |
        [[[    if (entity.state == 2) return '#F5DD61';
                  else return '#222831';  ]]]

ahh man got i know thanks :smiley:

Hi Home Assistant community,
Im brandnew in HomeAssistant and my English isnt the best, but I will try my best.
I am sometimes almost overwhelmed by the many possibilities in Home Assistant, there is actually nothing that cannot be realised. I like the custom button cards, which brings me to my first post.

I created such a button:
image

My problem is that I`m not able to bring the icon to the left side (over the complete hight) and then the name and the state_content to the right: This is the code:

type: custom:button-card
entity: light.dg_schlafzimmer_play_2
show_state: true
name: Büro Play 2
style:
  - text-transform: none
  - color: rgb(28, 128, 199)
  - font-weight: bold
  - font-size: 4px
size: 20%
styles:
  card:
    - font: 10px Arial
    - color: var(--button-card-light-color)
tap-action:
  action: more-info
hold-action:
  action: more-info
icon: mdi:desk-lamp-on
color: auto
action: more_info
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
state_content:
  - brightness
  - last-changed

I think for you specialists it`s maybe a nobrainer, but for me at the moment overload :frowning:
Thanks so much for your help and kind regards
Niklas

something like i_n_s should do it, (complete high is a matter of opinion) , styles could be of help here

Hi all. New to the custom button card. I’m creating a single page and using mushroom light card etc. in code editor mode the entities/button show rounded corners. When in live view everything is square.

Sure it’s something simple anyone know the answer please.

Thanks

Test if this adjusts the border-radius using your entity.

Ensure you don’t have a theme overriding the style

type: custom:button-card
entity: light.pc_lights
styles:
  card:
   - border-radius: 30px

This only seems to work for the full screen button card in the global setting. Doesn’t adjust individual entities within the button card. Tried various version of this code you provided in the entities code as well and no change. It’s weird how in edit mode it displays correctly.

Sorry for the delayed response. Are you using button cards inside a button card?

Please post your code for evaluation.

Could someone please tell me what I’m doing wrong, for some reason the icons /text are anchored the bottom left.

I tried using:
- align-self: center
- justify-self: center
but that didn’t help.

type: custom:button-card
entity: person.timmy
show_name: false
show_icon: false
styles:
  card:
    - box-shadow: none
    - border-radius: 0
    - padding: 10%
    - font-size: 14px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
    - height: 60px
custom_fields:
  status: |
    [[[
      if (states['person.timmy'].state =='not_home') { 
      return `<ha-icon icon="mdi:home-export-outline"
        style="width: 30px; height: 30px;">
        </ha-icon><span> Away</span>`;
      } 
      if (states['person.timmy'].state =='home') { 
      return `<ha-icon 
        icon="mdi:home"
        style="width: 30px; height: 30px;">
        </ha-icon><span> </br>${entity.state}</span>`;
      } else {
        return `<ha-icon 
        icon="mdi:map-marker-radius"
        style="width: 30px; height: 30px;">
        </ha-icon><span> ${entity.state}</span>`;
      }
    ]]]

Let’s start without custom fields and adjust from there…

type: custom:button-card
entity: person.timmy
show_name: false
show_icon: true
icon: |
     [[[ return entity.state === 'not_home' ? 'mdi:home-export-outline' : 'mdi:home';
           ]]]
styles:
  card:
    - box-shadow: none
    - border-radius: 0
    - padding: 10%
    - font-size: 14px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
  icon: 
    - height: 30px
    - width: 30px
    - color: red

Hi

No problem, thank you for replying. yes button inside button. I did try tinkering with CSS within the buttons shown in original post but could’nt get it to change. cheers

kiosk_mode:
  kiosk: true
views:
  - title: Home
    type: panel
    cards:
      - type: custom:button-card
        show_state: false
        tap_action:
          action: none
        custom_fields:
          MBCevietv:
            card:
              type: custom:mini-media-player
              entity: media_player.evies_tv
              group: false
              volume_stateless: false
              info: scroll
          MBCeviesele:
            card:
              type: custom:mushroom-light-card
              entity: light.elephant_lamp_light
              name: Elephant Lamp
              icon: mdi:lightbulb
              show_brightness_control: true
              tap_action:
                action: toggle
          MBCevieslight:
            card:
              type: custom:mushroom-light-card
              entity: light.evies_room
              name: Evies Light
              icon: mdi:lightbulb
              show_brightness_control: true
              tap_action:
                action: toggle
          MBCtedslight:
            card:
              type: custom:mushroom-light-card
              entity: light.bedroom
              name: Teds Light
              icon: mdi:lightbulb
              show_brightness_control: true
              tap_action:
                action: toggle
          MBCtedstar:
            card:
              type: custom:mushroom-entity-card
              entity: switch.teds_socket_s1
              name: Teds Star Light
              layout: vertical
              tap_action:
                action: toggle
          MBCbrowser:
            card:
              type: custom:browser-control-card
              hide_fullscreen: false
              hide_screenlock: true
              hide_zoom: true
              hide_refresh: false
              no_padding: true
              small_buttons: true
          MBCyard:
            card:
              type: custom:mushroom-light-card
              entity: light.yard_light
              name: Yard Flood
              icon: mdi:light-flood-up
              tap_action:
                action: toggle
              hold_action:
                action: none
              double_tap_action:
                action: none
              layout: vertical
          MBCkitchen:
            card:
              type: custom:mushroom-light-card
              entity: light.gpio12
              name: Kitchen Spots
              icon: mdi:lightbulb-spot
              tap_action:
                action: toggle
              hold_action:
                action: none
              double_tap_action:
                action: none
              layout: vertical
          MBClrspots:
            card:
              type: custom:mushroom-light-card
              entity: light.living_room_spots_socket_1
              name: Living Room Spots
              icon: mdi:lightbulb-spot
              tap_action:
                action: toggle
              hold_action:
                action: none
              double_tap_action:
                action: none
              layout: vertical
          MBCchipbanner:
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: entity
                  entity: person.aaron
                - type: entity
                  entity: sensor.shellyem_c7f463_channel_1_power
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  double_tap_action:
                    action: none
                - type: light
                  entity: light.comms_cupboard
                  content_info: name
                  name: Comms Cupboard
                - type: entity
                  entity: switch.boiler_switch_0
                  name: Heating
                  content_info: name
          MBCcal:
            card:
              type: calendar
              entities:
                - calendar.events
          MBCunderstairs:
            card:
              type: custom:mushroom-light-card
              entity: light.back_right
              name: Understairs Spots
              icon: mdi:lightbulb-spot
              show_brightness_control: true
          MBClr_light:
            card:
              type: custom:mushroom-light-card
              entity: light.living_room_light_light
              name: Living Room
              icon: mdi:lightbulb-spot
              show_brightness_control: true
          MBCdr_spots:
            card:
              type: custom:mushroom-light-card
              entity: light.dining_room_2
              name: Dining Room
              icon: mdi:lightbulb-spot
              show_brightness_control: true
          MBCshed_cam:
            card:
              type: custom:webrtc-camera
              url: shed
          MBCshedrear_cam:
            card:
              type: custom:webrtc-camera
              url: shedrear
          MBCanpr_cam:
            card:
              type: custom:webrtc-camera
              url: anpr
          MBCyard_cam:
            card:
              type: custom:webrtc-camera
              url: yard
          MBCfront_door_cam:
            card:
              type: custom:webrtc-camera
              url: front_door
          MBCyard_ptz_cam:
            card:
              type: custom:webrtc-camera
              url: ptz
        styles:
          card:
            - padding: 22px
            - align-self: start
            - width: 1080px
            - height: 1920px
            - opacity: 1
            - background-color: black
          custom_fields:
            MBCevietv:
              - position: absolute
              - top: 382px
              - left: 780px
              - width: 290px
              - height: 30px
              - font-size: 15px
            MBCeviesele:
              - position: absolute
              - top: 622px
              - left: 440px
              - width: 200px
              - height: 30px
              - font-size: 15px
            MBCevieslight:
              - position: absolute
              - top: 501px
              - left: 440px
              - width: 200px
              - height: 30px
              - font-size: 15px
            MBCtedslight:
              - position: absolute
              - top: 382px
              - left: 440px
              - width: 200px
              - height: 30px
              - font-size: 15px
            MBCtedstar:
              - position: absolute
              - top: 382px
              - left: 645px
              - width: 130px
              - height: 30px
              - font-size: 15px
            MBCyard:
              - position: absolute
              - top: 622px
              - left: 205px
              - width: 200px
              - height: 30px
              - font-size: 15px
            MBCkitchen:
              - position: absolute
              - top: 622px
              - left: 2px
              - width: 200px
              - height: 30px
              - font-size: 15px
            MBCunderstairs:
              - position: absolute
              - top: 500px
              - left: 205px
              - width: 200px
              - height: 30px
              - font-size: 15px
            MBClrspots:
              - position: absolute
              - top: 382px
              - left: 205px
              - width: 200px
              - height: 30px
              - font-size: 15px
            MBCchipbanner:
              - position: absolute
              - top: 320px
              - left: 2px
              - width: 1080px
              - height: 60px
              - font-size: 15px
              - background-color: black
            MBCbrowser:
              - position: absolute
              - top: 2px
              - left: 910px
              - width: 165px
              - height: 65px
              - font-size: 12px
              - background-color: black
            MBCcal:
              - position: absolute
              - top: 1290px
              - left: 780px
              - width: 300px
              - height: 540px
              - font-size: 16px
            MBClr_light:
              - position: absolute
              - top: 380px
              - left: 2px
              - width: 200px
              - height: 30px
              - font-size: 16px
            MBCdr_spots:
              - position: absolute
              - top: 500px
              - left: 2px
              - width: 200px
              - height: 30px
              - font-size: 16px
            MBCshedrear_cam:
              - position: absolute
              - top: 2px
              - left: 818px
              - width: 260px
              - height: 147px
            MBCshed_cam:
              - position: absolute
              - top: 2px
              - left: 550px
              - width: 260px
              - height: 147px
            MBCanpr_cam:
              - position: absolute
              - top: 2px
              - left: 2px
              - width: 260px
              - height: 147px
            MBCfront_door_cam:
              - position: absolute
              - top: 160px
              - left: 2px
              - width: 260px
              - height: 147px
            MBCyard_cam:
              - position: absolute
              - top: 2px
              - left: 278px
              - width: 260px
              - height: 147px
            MBCyard_ptz_cam:
              - position: absolute
              - top: 160px
              - left: 278px
              - width: 260px
              - height: 147px
          name:
            - justify-self: start
            - align-self: start
            - font-size: 24px
            - font-weight: 500
            - color: white
  - title: buttons
    path: buttons
    cards:
      - type: custom:webrtc-camera
        url: front_door
      - type: custom:browser-control-card
        hide_fullscreen: false
        hide_screenlock: true
        hide_zoom: true
        hide_refresh: true
        no_padding: true
        small_buttons: true
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: person.aaron
          - type: entity
            entity: sensor.shellyem_c7f463_channel_1_power
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none

When using different card types in the custom fields you need to switch to card mod to style the CSS
image

Quick example

type: custom:button-card
show_state: false
tap_action:
    action: none
custom_fields:
          MBCyard:
            card:
              type: custom:mushroom-light-card
              entity: light.yard_light
              icon: mdi:light-flood-up
              card_mod:
               style: |
                ha-card {
                 background: blue !important;
                 }

cheers, new to this CSS etc!! will give it a go.

Thank you, this makes it a bit easier to work with.
I managed to get my text state in here, still working on the colour.

type: custom:button-card
entity: person.timmy_clark
show_name: true
name: |
  [[[
    if (states['person.timmy'].state =='not_home') { 
    return ` Away`;
    color = 'red'
    } 
    if (states['person.timmy'].state =='home') { 
    return `${entity.state}`;
    color = 'red'
    } else {
      return `${entity.state}`;
      color = 'yellow'
    }
  ]]]
show_icon: true
icon: >
  [[[ return entity.state === 'not_home' ? 'mdi:home-export-outline' :
  'mdi:home';
        ]]]
styles:
  card:
    - box-shadow: none
    - border-radius: 0
    - padding: 10%
    - font-size: 14px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
  icon:
    - height: 30px
    - width: 30px

I have a couple of things that I’m working on, like the proximity.
I was first making sure that I got the information that I wanted and managed to do that.

Next step would be to show if I’m home, at work or any other zone that’s been setup with the name of that zone and if not the direction of travel with the km to home.

type: custom:button-card
styles:
  card:
    - box-shadow: none
    - border-radius: 0
    - padding: 10%
    - font-size: 14px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
    - height: 60px
custom_fields:
  proximity: |
    [[[
      return `<ha-icon
        icon="mdi:map-marker-distance"
        style="width: 26px; height: 26px;">
        </ha-icon>  </br> <span>${states['proximity.timmy'].state} Km</span>`
    ]]]

Thank you very much for your help, and sorry for the reply.
I messed up as it should go to a “new answer”

This is a little simpler code and adds the color to the name

type: custom:button-card
entity: person.timmy_clark
show_name: true
name: |
 [[[ return entity.state === 'not_home' ? 'Away' :
  'Home';
        ]]]
show_icon: true
icon: >
  [[[ return entity.state === 'not_home' ? 'mdi:home-export-outline' :
  'mdi:home';
        ]]]
styles:
  card:
    - box-shadow: none
    - border-radius: 0
    - padding: 10%
    - font-size: 14px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
  icon:
    - height: 30px
    - width: 30px
    - color: |
       [[[
          if (entity.state ==='not_home' || entity.state == 'home') return 'red';
          else return 'yellow';
                             ]]]
  name:
    - color: |
       [[[
          if (entity.state ==='not_home' || entity.state == 'home') return 'red';
          else return 'yellow';
                             ]]]

Another method

type: custom:button-card
entity: person.timmy_clark
show_name: true
icon: >
  [[[ return entity.state === 'not_home' ? 'mdi:home-export-outline' :
  'mdi:home';
        ]]]
state:
  - value: not_home
    styles:
      icon:
        - color: red
      name:
        - color: red
  - value: home
    styles:
      icon:
        - color: yellow
      name:
        - color: yellow
styles:
  card:
    - box-shadow: none
    - border-radius: 0
    - padding: 10%
    - font-size: 14px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
  icon:
    - height: 30px
    - width: 30px

Thank you very much. I managed to get most of the things working.
I used the second variant to add the colours because I needed more than two states.
The only problem I have left is the battery / proximity colouring.

I added this colouring to the battery, but guess I need to add the following line somewhere within the colour function const batteryLevel = states['sensor.iphone_battery_level'].state so that I know what to do, I tried adding it with a - but that didn’t work.

This is what the stack looks like.
If you see any room for improvement, please let me know.

type: horizontal-stack
cards:
  - type: custom:button-card
    entity: sensor.iphone_battery_level
    show_name: true
    name: |
      [[[
        if (states['sensor.iphone_battery_state'].state =='Charging') { 
        return `${states['sensor.iphone_battery_level'].state}`;
        } else {
          return `${entity.state}`;
        }
      ]]]
    show_icon: true
    icon: |
      [[[
        const batteryLevel = states['sensor.iphone_battery_level'].state;
        
        if (states['sensor.iphone_battery_state'].state =='Charging') { 
          return ``;
        }
         if (batteryLevel <= 10) {
          return 'mdi:battery-10';
        }
         if (batteryLevel <= 20) {
          return 'mdi:battery-20';
        }
         if (batteryLevel <= 30) {
          return 'mdi:battery-30';
        }
         if (batteryLevel <= 40) {
          return 'mdi:battery-40';
        }
         if (batteryLevel <= 50) {
          return 'mdi:battery-50';
        }
         if (batteryLevel <= 60) {
          return 'mdi:battery-60';
        }
         if (batteryLevel <= 70) {
          return 'mdi:battery-70';
        }
         if (batteryLevel <= 80) {
          return 'mdi:battery-80';
        }
         if (batteryLevel <= 90) {
          return 'mdi:battery-90';
        } else {
          return `mdi:battery`;
        }
      ]]]
    state:
      - value: batteryLevel <= 90
        styles:
          icon:
            - color: green
      - value: batteryLevel <= 75
        styles:
          icon:
            - color: lightgreen
      - value: batteryLevel <= 50
        styles:
          icon:
            - color: yellow
      - value: batteryLevel <= 30
        styles:
          icon:
            - color: orange
      - value: batteryLevel <= 20
        styles:
          icon:
            - color: red
    styles:
      card:
        - box-shadow: none
        - border-radius: 0
        - padding: 10%
        - font-size: 14px
        - text-shadow: 0px 0px 0px black
        - text-transform: capitalize
      icon:
        - height: 30px
        - width: 30px
  - type: custom:button-card
    entity: sensor.iphone_connection_type
    show_name: true
    name: |
      [[[
        if (states['sensor.iphone_connection_type'].state =='Wi-Fi') { 
        return `${states['sensor.iphone_ssid'].state}`;
        } 
        if (states['sensor.iphone_connection_type'].state =='Cellular') { 
        return `${entity.state}`;
        } else {
          return `${entity.state}`;
        }
      ]]]
    show_icon: true
    icon: |
      [[[
        return entity.state === 'Wi-Fi' ? 'mdi:wifi' : 'mdi:signal-cellular-3';
      ]]]
    styles:
      card:
        - box-shadow: none
        - border-radius: 0
        - padding: 10%
        - font-size: 14px
        - text-shadow: 0px 0px 0px black
        - text-transform: capitalize
      icon:
        - height: 30px
        - width: 30px
  - type: custom:button-card
    entity: sensor.iphone_steps
    show_name: true
    name: |
      [[[
        if (states['sensor.iphone_steps'].state =='Charging') { 
        return `${states['sensor.iphone_steps'].state}`;
        } else {
          return `${entity.state}`;
        }
      ]]]
    show_icon: true
    icon: |
      [[[
        const stepCount = states['sensor.iphone_steps'].state;
        
        if (states['sensor.iphone_steps'].state =='Charging') { 
          return ``;
        }
        if (stepCount >= 8000) {
          return 'mdi:star';
        }
        if (stepCount >= 6000) {
          return 'mdi:walk';
        }
        if (stepCount >= 4000) {
          return 'mdi:walk';
        }
        if (stepCount >= 2000) {
         return 'mdi:walk';
        }
        if (stepCount >= 1000) {
          return 'mdi:walk';
        } else {
          return ``;
        }
      ]]]
    styles:
      card:
        - box-shadow: none
        - border-radius: 0
        - padding: 10%
        - font-size: 14px
        - text-shadow: 0px 0px 0px black
        - text-transform: capitalize
      icon:
        - height: 30px
        - width: 30px
  - type: custom:button-card
    entity: proximity.timmy
    show_name: true
    name: |
      [[[
        if (states['proximity.timmy'].state =='0') { 
          return `Home`;
        } else {
          return `${states['proximity.timmy'].state} KM`;
        }
      ]]]
    show_icon: true
    icon: |
      [[[
        return entity.state === '0' ? 'mdi:home-account' : 'mdi:map-marker-distance';
      ]]]
    state:
      - value: 0
        styles:
          icon:
            - color: lightgreen
    styles:
      card:
        - box-shadow: none
        - border-radius: 0
        - padding: 10%
        - font-size: 14px
        - text-shadow: 0px 0px 0px black
        - text-transform: capitalize
      icon:
        - height: 30px
        - width: 30px
  - type: custom:button-card
    entity: person.timmy
    show_name: true
    name: |
      [[[
        if (states['person.timmy'].state =='not_home') { 
        return ` Away`;
        } 
        if (states['person.timmy'].state =='Communicode') { 
        return `Communicode`;
        } 
        if (states['person.timmy'].state =='home') { 
        return `${entity.state}`;
        } else {
          return `${entity.state}`;
        }
      ]]]
    show_icon: true
    icon: >
      [[[ return entity.state === 'not_home' ? 'mdi:home-export-outline' :
      'mdi:home';
            ]]]
    state:
      - value: not_home
        styles:
          icon:
            - color: red
      - value: home
        styles:
          icon:
            - color: lightgreen
      - value: Communicode
        styles:
          icon:
            - color: deepskyblue
    styles:
      card:
        - box-shadow: none
        - border-radius: 0
        - padding: 10%
        - font-size: 14px
        - text-shadow: 0px 0px 0px black
        - text-transform: capitalize
      icon:
        - height: 30px
        - width: 30px

Isn’t the battery icon color covered here?

    state:
      - value: batteryLevel <= 90
        styles:
          icon:
            - color: green
      - value: batteryLevel <= 75
        styles:
          icon:
            - color: lightgreen
      - value: batteryLevel <= 50
        styles:
          icon:
            - color: yellow
      - value: batteryLevel <= 30
        styles:
          icon:
            - color: orange
      - value: batteryLevel <= 20
        styles:
          icon:
            - color: red

When I entered just the battery code, this was the results

image

We could probably trim things up by using variables