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