css styling would like to not sure how to apply style so they all look and act the same thats all
Thanks so very much super enhancement …
@DavidFW1960 My solution is probably worse though, a lot of code to accomplish a simple thing. It could however work fine if the colors in the card work for both themes (or apply some more transparancy to it). I only use one theme at the moment (I might work on making a day theme as well, but for now I am too busy reworking my entire frontend to be more simple, elegant and wife friendly).
ofcourse I will share the code:
- cards:
- type: custom:state-switch
entity: light.woonkamer_plafond
states:
"on":
type: 'custom:card-modder'
style:
border-radius: 20px
border-style: solid
border-width: 1px
border-color: '#e5e5e5'
--paper-card-background-color: rgba(20, 20, 20, 0.4)
height: 50px
padding: 20%
font-size: 13px
card:
entity: light.woonkamer_plafond
icon: 'mdi:ceiling-light'
name: Plafond
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
"off":
type: 'custom:card-modder'
style:
border-radius: 20px
box-shadow: 2px 2px rgba(0,0,0,0.3)
height: 50px
padding: 20%
font-size: 13px
card:
entity: light.woonkamer_plafond
icon: 'mdi:ceiling-light'
name: Plafond
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
"unavailable":
type: 'custom:card-modder'
style:
border-radius: 20px
box-shadow: 2px 2px rgba(0,0,0,0.3)
height: 50px
padding: 20%
font-size: 13px
card:
entity: light.woonkamer_plafond
icon: 'mdi:ceiling-light'
name: Plafond
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:state-switch
entity: light.eettafel_lamp
states:
"on":
type: 'custom:card-modder'
style:
border-radius: 20px
border-style: solid
border-width: 1px
border-color: '#e5e5e5'
--paper-card-background-color: rgba(20, 20, 20, 0.4)
height: 50px
padding: 20%
font-size: 13px
card:
entity: light.eettafel_lamp
icon: 'mdi:ceiling-light'
name: Eettafel
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
"off":
type: 'custom:card-modder'
style:
border-radius: 20px
box-shadow: 2px 2px rgba(0,0,0,0.3)
height: 50px
padding: 20%
font-size: 13px
card:
entity: light.eettafel_lamp
icon: 'mdi:ceiling-light'
name: Eettafel
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
"unavailable":
type: 'custom:card-modder'
style:
border-radius: 20px
box-shadow: 2px 2px rgba(0,0,0,0.3)
height: 50px
padding: 20%
font-size: 13px
card:
entity: light.eettafel_lamp
icon: 'mdi:ceiling-light'
name: Eettafel
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:state-switch
entity: light.tafel_lamp
states:
"on":
type: 'custom:card-modder'
style:
border-radius: 20px
border-style: solid
border-width: 1px
border-color: '#e5e5e5'
--paper-card-background-color: rgba(20, 20, 20, 0.4)
height: 50px
padding: 20%
font-size: 13px
white-space: nowrap
card:
entity: light.tafel_lamp
icon: 'mdi:lamp'
name: Tafel Lamp
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
"off":
type: 'custom:card-modder'
style:
border-radius: 20px
box-shadow: 2px 2px rgba(0,0,0,0.3)
height: 50px
padding: 20%
font-size: 13px
white-space: nowrap
card:
entity: light.tafel_lamp
icon: 'mdi:lamp'
name: Tafel Lamp
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
"unavailable":
type: 'custom:card-modder'
style:
border-radius: 20px
box-shadow: 2px 2px rgba(0,0,0,0.3)
height: 50px
padding: 20%
font-size: 13px
white-space: nowrap
card:
entity: light.tafel_lamp
icon: 'mdi:lamp'
name: Tafel Lamp
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:state-switch
entity: light.vloerlamp_2
states:
"on":
type: 'custom:card-modder'
style:
border-radius: 20px
border-style: solid
border-width: 1px
border-color: '#e5e5e5'
--paper-card-background-color: rgba(20, 20, 20, 0.4)
height: 50px
padding: 20%
font-size: 13px
white-space: nowrap
card:
entity: light.vloerlamp_2
icon: 'mdi:floor-lamp'
name: Vloer Lamp
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
"off":
type: 'custom:card-modder'
style:
border-radius: 20px
box-shadow: 2px 2px rgba(0,0,0,0.3)
height: 50px
padding: 20%
font-size: 13px
white-space: nowrap
card:
entity: light.vloerlamp_2
icon: 'mdi:floor-lamp'
name: Vloer Lamp
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
"unavailable":
type: 'custom:card-modder'
style:
border-radius: 20px
box-shadow: 2px 2px rgba(0,0,0,0.3)
height: 50px
padding: 20%
font-size: 13px
white-space: nowrap
card:
entity: light.vloerlamp_2
icon: 'mdi:floor-lamp'
name: Vloer Lamp
type: entity-button
tap_action:
action: toggle
hold_action:
action: more-info
type: horizontal-stack
This is just a single row of 4 buttons. As you can see the code to achieve this the way I have done it is massive, though in all fairness I haven’t found any performance differences (but then again I run HA on a hexacore i7 along with some other virtual machines).
Took me a while to rewrite all of my previously existing code to the way it is now and I might rewrite everything again if this would ever be possible with the core entity button. Let me know what your thoughts on this would be.
Ah I see you’re using card-modder and setting RGB as well so for mine, not much improvement of setting the theme and yours suffers from the same issue that if you switch theme, the colours of the button won’t change.
I think mine is simpler… In addition to the card above, I created a new theme for the on state called slateicon and it just has the one colour set in it like this:
slateicon: # Only used for Exit-Enter Button when ON
paper-item-icon-color: '#b58e31' # Set to var(--secondary-text-color) of current theme
Along with some instruction on how to edit it if I change theme from slate in the future. It does exactly what I was after though as I think this button-card has no future.
Exactly, I just use rgb to color the cards, that is why I said it will only work if the color can match both themes and my future day colors will be in the same line just lighter. Your way looks much better though, a lot less code, I might give that a try though. But will need some rest as I have been playing around with css and the way I’ve currently done it for way too long. Took me hours to get it to look acceptable, took me weeks to finetune the stuff and will probably change it another dozen times.
1 Like
Hi,
I have strange issue - the buttons calling services sudenly stopped working few days ago - I dont think I changed any cards code nor the related devices.
Below is my code
cards:
- color_type: card
entity: fan.air_purifier
name: Air Purifier
show_state: true
state:
- color: 'rgb(6, 175, 247)'
value: 'on'
- color: var(--disabled-text-color)
value: 'off'
type: 'custom:button-card'
- cards:
- action: service
color_type: label-card
entity: fan.air_purifier
icon: 'mdi:fan'
name: Turbo
service:
action: set_speed
data:
entity_id: fan.air_purifier
speed: favorite
domain: fan
show_state: true
state:
- color: 'rgb(6, 175, 247)'
value: 'on'
- color: var(--disabled-text-color)
value: 'off'
type: 'custom:button-card'
- action: service
color_type: label-card
entity: fan.air_purifier
icon: 'mdi:alpha-a-circle-outline'
name: Auto
service:
action: set_speed
data:
entity_id: fan.air_purifier
speed: auto
domain: fan
show_state: true
state:
- color: 'rgb(6, 175, 247)'
value: 'on'
- color: var(--disabled-text-color)
value: 'off'
type: 'custom:button-card'
- action: service
color_type: label-card
entity: fan.air_purifier
icon: 'mdi:power-sleep'
name: Silent
service:
action: set_speed
data:
entity_id: fan.air_purifier
speed: sleep
domain: fan
show_state: true
state:
- color: 'rgb(6, 175, 247)'
value: 'on'
- color: var(--disabled-text-color)
value: 'off'
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
What can be wrong?
Hey.
You said that I could do this with the core entity button now but when I look at that I cant seem to find any option for changing the button size, icon size or use a “space-button” or find the option to show the state instead of the name…
Have I missed something here?
Yeah I am sorry, I said it wrong as david pointed out. I use card modder with core entity button, for my code you can check here:
1 Like
I need to set some values based on input_select. This doesn’t work:
type: entity-button icon: mdi:youtube name: LIVETV entity: > {% if states('input_select.firetv_choices') = 'FireTV Living Room' %} media_player.firetv_living_room {% elif states('input_select.firetv_choices') = 'FireTV Bedroom' %} media_player.firetv_bedroom {% endif %}
Any way to use templates in the stock or custom:button-cards? I really don’t want to create another sensor that just reports the state of an input_select…
1 Like
Now we’re talking. Thanks @iantrich. I’ll have a go at it.
-
Does it support custom_updater?
-
What’s the if - elseif - else syntax in cases where there’s more than two choices as covered by: logical_test ? ‘xx’ : ‘yy’
So, I get “Invalid Entry” in Lovelace for my button tied to this code. (input_select defaults to “FireTV Living Room”
Resource is as follows, and ‘js’ is at this location:
- url: /local/config-template-card.js
type: module
- type: horizontal-stack cards: - type: custom:card-modder card: type: 'custom:config-template-card' variables: - states['input_select.firetv_choices'].state entities: - input_select.firetv_choices card: type: custom:entity-button entities: - entity: "${vars[0] === 'FireTV Living Room' ? 'media_player.firetv_living_room' : 'media_player.firetv_bedroom'}" icon: mdi:youtube name: LIVETV hold_action: none tap_action: action: call-service service: script.set_plex_to_livetv service_data: entity_id: "${vars[0] === 'FireTV Living Room' ? 'media_player.firetv_living_room' : 'media_player.firetv_bedroom'}" command: "am start -a android.intent.action.VIEW -d -n com.google.android.youtube.tv/com.google.android.apps.youtube.tv.activity.ShellActivity" style: background-color: rgba(56,60,69,1) border-radius: 20px border: solid 3px rgba(118,185,0,1) box-shadow: 3px 3px rgba(0,0,0,0.4)
2 Likes
Hi @iantrich ,
I added an operator functionality to the state object, if anyone can check and merge if appropriate:
https://github.com/custom-cards/button-card/pull/80
Extract from the updated documentation:
The definition order matters, the first item to match will be the one selected.
- type: "custom:button-card"
entity: sensor.temperature
show_state: true
state:
- value: 15
operator: '<='
color: blue
- value: 25
operator: '>='
color: red
- operator: 'default' # used if nothing matches
color: yellow
Available operators:
| Operator |
value example |
Description |
|---|---|---|
< |
5 |
State is inferior to value
|
<= |
4 |
State is inferior or equal to value
|
== |
42 |
State is equal (=== javascript) to value
|
>= |
32 |
State is superior or equal to value
|
> |
12 |
State is superior to value
|
!= |
normal |
State is not equal (!== javascript) to value
|
regex |
'^norm.*$' |
value regex applied to State does match |
default |
N/A | If nothing matches, this is used |
Cheers
3 Likes
Thanks to @RomRider, we have v0.0.7 which adds operators to state. See the updated documentation on how to utilize.
If only this card would have a hold_action it would be the best entity card out there.
Thanks for your great contribution @RomRider, I have been wanting this feature! I am going to update a bunch of my buttons now with this new functionality. So far I’ve made a battery one real quick that goes from green, yellow, orange, red as it depletes.
- type: "custom:button-card"
icon: mdi:battery
name: Battery
color_type: card
entity: sensor.seans_iphone_xs_battery_level
show_state: true
state:
- value: "10"
operator: '<='
color: "#FF0000" #red
- value: "20"
operator: '<='
color: "#ff6600" #red orange
- value: "30"
operator: '<='
color: "#ff9933" #dark orange
- value: "40"
operator: '<='
color: "#ffcc00" #light orange
- value: "50"
operator: '<='
color: "#FFFF00" #yellow
- value: "60"
operator: '<='
color: "#FFFF00" #yellow
- value: "70"
operator: '<='
color: "#FFFF00" #yellow
- value: "80"
operator: '<='
color: "#CCFF33" #yellow green
- value: "90"
operator: '<='
color: "#66FF33" #light green
- value: "100"
operator: '<='
color: "#279b37" #darkgreen
I would really love to see support for changing the icons based on state as well, if that is possible. For example in this code block I just shared, it would be neat to change the battery icon to mdi:battery-90 , mdi:battery-80, mdi:battery-70, mdi:battery-60 etc.
@SeanM, icon is supported as well! Just add icon: mdi:the_icon_you_want to each state, it can be a different icon per state of course. 
But you’re right, there’s no example, I’m going to add this in the documentation!
Thank you for clarifying! After a bunch of testing it seems the problem I ran into is that when it’s set to color_type: card the different state icons do not work. Only when it’s set to color_type: icon does it work. Hopefully support could be added to color_type: card as well?
I think i found another issue, unless I messed up on the operators. The values I set for '<=' 100 is not displaying, and same thing for '<' 10. Here is animated gif screen recording: https://gfycat.com/DownrightNearCurassow
and the code i used to test:
input_number:
test:
name: Testing States
icon: mdi:battery-charging-outline
min: 0
max: 100
step: 5
And here is the states.
- type: "custom:button-card"
icon: mdi:battery
# name: Battery
color_type: icon
entity: input_number.test
show_state: true
state:
- value: "10"
operator: '<'
color: "#FF0000" #red
icon: "mdi:battery-10"
- value: "20"
operator: '<='
color: "#ff6600" #red orange
icon: "mdi:battery-20"
- value: "30"
operator: '<='
color: "#ff9933" #dark orange
icon: "mdi:battery-30"
- value: "40"
operator: '<='
color: "#ffcc00" #light orange
icon: "mdi:battery-40"
- value: "50"
operator: '<='
color: "#FFFF00" #yellow
icon: "mdi:battery-50"
- value: "60"
operator: '<='
color: "#FFFF00" #yellow
icon: "mdi:battery-60"
- value: "70"
operator: '<='
color: "#FFFF00" #yellow
icon: "mdi:battery-70"
- value: "80"
operator: '<='
color: "#CCFF33" #yellow green
icon: "mdi:battery-80"
- value: "90"
operator: '<='
color: "#66FF33" #light green
icon: "mdi:battery-90"
- value: "100"
operator: '<='
color: "#279b37" #dark green
icon: "mdi:battery-full"
Not sure if this is a bug or issue with the way I used operators? Thanks again for this amazing addition! 
Hey,
Going to check for the color_type: card
For your other problem, you should delete the quotes for the value and also the <= 100, the icon mdi:battery-full doesn’t exist, it should be mdi:battery
For me it works with the modifications above mentioned, result being:
- type: "custom:button-card"
icon: mdi:battery
# name: Battery
color_type: icon
entity: input_number.test
show_state: true
state:
- value: 10
operator: '<'
color: "#FF0000" #red
icon: "mdi:battery-10"
- value: 20
operator: '<='
color: "#ff6600" #red orange
icon: "mdi:battery-20"
- value: 30
operator: '<='
color: "#ff9933" #dark orange
icon: "mdi:battery-30"
- value: 40
operator: '<='
color: "#ffcc00" #light orange
icon: "mdi:battery-40"
- value: 50
operator: '<='
color: "#FFFF00" #yellow
icon: "mdi:battery-50"
- value: 60
operator: '<='
color: "#FFFF00" #yellow
icon: "mdi:battery-60"
- value: 70
operator: '<='
color: "#FFFF00" #yellow
icon: "mdi:battery-70"
- value: 80
operator: '<='
color: "#CCFF33" #yellow green
icon: "mdi:battery-80"
- value: 90
operator: '<='
color: "#66FF33" #light green
icon: "mdi:battery-90"
- value: 100
operator: '<='
color: "#279b37" #dark green
icon: "mdi:battery"
2 Likes
I’m not having any luck changing icons by state. I’ve tried a bunch of values, operators, etc.
type: 'custom:button-card'
entity: switch.output_033
name: Mute Status
color_type: icon
show_state: true
state:
- value: 'on'
operator: ==
icon: 'mdi:volume-off'
- value: 'off'
operator: ==
icon: 'mdi:volume-high'
- operator: 'default'
icon: 'mdi:volume-off'