I presume the font-size: still isn’t working. I know you can change it in the .js, but that changes every instance of the card, and I would like to try and change it based on per entity, as some of mine have longer names than others, so just wanted to shorted one by a px or two, to keep the card size uniform. Unfortunately, I wouldn’t have a clue as where to look to try and fix it.
And where could I find the latest update of the button card? Kuuji’s is 6 days old. That was before the problems started I believe??
I don’t think so. The problems were a couple of weeks ago so 6 days is pretty right for the working card. You can look at the PR’s to get the upcoming version if there is one but the only current proposed changes are the style ones I posted above.
1 Like
Font-size works for me.
I have problem if I use default card but if I use color_type: card it works fine.
10 - 15 - 20 in the top row.
14px on the rest.
style:
- text-transform: none
- color: black
- background-color: white
- font-size: 14px
- font-weight: normal
So it does seem to work if you have color_type: card but unfortunately that doesn’t help me, as I am using the defualt, or color_type: icon as I have the motion sensor green when clear, and then change to red when motion detected, and same with door sensors, and when I have it icon mode, the font-size: stops working unfortunately.
- type: custom:card-modder
card:
type: "custom:button-card"
entity: binary_sensor.door_window_sensor_158d000239432d
icon: mdi:door-closed
action: more_info
name: Front Door
show_state: false
color_type: card
style:
- font-size: 8px
state:
- value: 'Closed'
color: rgb(17, 221, 23)
icon: mdi:door-closed
- value: 'Open'
color: rgb(221, 17, 17)
icon: mdi:door-open
- type: custom:card-modder
card:
type: "custom:button-card"
entity: binary_sensor.door_window_sensor_158d000239432d
icon: mdi:door-closed
action: more_info
name: Front Door
show_state: false
color_type: icon
style:
- font-size: 8px
state:
- value: 'Closed'
color: rgb(17, 221, 23)
icon: mdi:door-closed
- value: 'Open'
color: rgb(221, 17, 17)
icon: mdi:door-open
Don’t suppose anyone cleverer than me could help out. Many thanks in advance.
I found a thing last night that makes the default to work.
I don’t know if its the best solution but it works for me.
If you open the button-card.js and edit (I dont know the line since I have edit alot in mine) but under
iconColoredHtml(state, config)
change these two lines.
{config.name ? html<div> {config.show_state ? html
and change
<div></div> into <span></span>
Then it works so it looks like the CSS doesn’t want to affect the div just span… I am trying to fix mine since its not working perfect yet.
I have also made a “link-card” and also a “space-card” like the blank-card but this also affect the height so you can create space like in the gif.
I am only using the button-card.js here nothing extra.
I take that back, I needed to clear the cache, and that seem’s to have worked. Going to have a play and see. Thank you very much @Rondom
No problems!
When I think my version is good enough I will try to figure out how to post it on github or I just post a url here with it and instructions 
1 Like
I have an issue to where “style” will not apply unless “color_type” is set to “card”. If I set it to icon then “style” is not being applied.
If you read my comment 2 post up you will find the solution…
Thank you! That worked great!
Since it seems like you are pretty familiar with this card maybe you can help me with another request I have for this card.
I would love to be able to set and Icon color for On/Off state on a button card. This would give me full control of both background and icon color when state is on and off, right now when using button card the icon is white/black for me and it does not work with the colors I would love to use.
The answer to this question is in the very first post of the thread under Options. You need to set the color and color_off strings to the color you want.
But with that I only control 1 color on each state. If I use the button card (coloring the background) the values I put in only controls the background color states and not the icons, I would love to be able to also set the icon colors.
Add the color: value to your state: declaration along with color_type: icon
state:
- value: 'on'
color_type: icon
color: rgb(181, 142, 49)
1 Like
If I am reading the Github page correctly, it appears you can color either the icon or button but not both at the same time. You might be able to use Card Modder to set the color of the button and then color the icon using the native settings but I haven’t tried that myself.
I dont understand what you are trying to get out of this?
First you declare color_type: card and later color_type: icon but you never declare what custom-card you should use?
Do you want a blue button that remains blue all the time and then change the color of the icon depends if the state is on or off?
Like this?
card:
- type: "custom:button-card"
entity: switch.hallway
icon: mdi:spotlight-beam
name: Lights
color: #af6a71
color_off: #f1d6c8
size: 40px
style:
- text-transform: none
- color: black
- background-color: blue
- font-size: 14px
- font-weight: normalI think he means that he wants the button to change color depending on state as well as the icon. Like Apple Homekit does for example, in Homekit the button is grey and the icon as well, when turning it on, the button turns white and the icon receives a color. As far as I know this isn’t possible with this card.
Ah I see… 
I was thinking that I had seen this before and I got it to work like this now.
cards:
- type: "custom:button-card"
color_type: card
name: Light
entity: light.computer
icon: mdi:lamp
size: 40px
action: toggle
show_state: true
state:
- value: 'on'
color: rgb(0, 0, 255)
- value: 'off'
color: rgb(255, 255, 255)
style:
- text-transform: none
- font-size: 14px
- font-weight: normalHi @gurukid
can you share the code?
I’m interested at the Lamp part, where you have the Dim, Custom and Edit buttons.
Thanks