Currently not, but please open a feature request so that I add it to the next release
Yes, for example:
styles:
card:
- background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)
Use this website to generate the gradient for example
Thanks man!!! That was exactly what I was looking for!
You are the man!
Is there a way to make it so that when button is pressed it makes a color to illustrate that its being press down.
I find that this could be usefull for some switches were i have Harmony activity switches and whant to show that ive acualy pressed the button so i know the activity is about to start before i klick again.
This is just one example of many were i have buttons that has a script on them that makes allot of stuff were it take abitt of time before it turns on and then gets a color.
I could not find a answer to this when i search so hope any of you might have a answer.
Only way to do this at the moment is by adding a delay to the script. This will give the script a momentary âonâ state which will make the button light up.
Otherwise this is something that @RomRider has not found a solution to yet.
Hello I have a question, I have a template:
recent_movie:
show_entity_picture: true
show_name: false
aspect_ratio: 1/1.3937
name: >
[[[
var index = variables.index - 1;
var data = entity.attributes.result.movies;
var title = data[index].title;
variables.movieid = data[index].movieid;
return title;
]]]
entity_picture: >
[[[
var index = variables.index - 1;
var data = entity.attributes.result.movies;
var image = data[index].art.poster;
image = image.replace("image://","");
return decodeURIComponent(image);
]]]
This creates a card to a list of movies, according to the âvariables.indexâ I return a movie image from a array.
But I would like to store on the template a extra field, movieid, to later use calling a mqtt service I tried in the template:
variables:
movieid: >
[[[
var index = variables.index - 1;
var data = entity.attributes.result.movies;
var movieid = data[index].movieid;
return movieid;
]]]
But this does not seems to work.
How can I store this on a variable and later use it to call the mqtt service on tap action?
Thank Yoy
What?
I donât know where youâre getting this code from but we need more info here. What entity are you using and what are itâs attributes.
This is my code, the code that I done to extract data from a JSON variable. I will make the question from another perspective.
We can set variables like this:
- type: custom:button-card
template: recent_movie
entity: sensor.kodi_movies
variables:
index: 1
I declare a new variable with the name index with the value 1.
With that I can use it to access a sensor that contains a JSON object
recent_movie:
show_entity_picture: true
show_name: false
aspect_ratio: 1/1.3937
name: >
[[[
var index = variables.index - 1;
var data = entity.attributes.result.movies;
var title = data[index].title;
return title;
]]]
entity_picture: >
[[[
var index = variables.index - 1;
var data = entity.attributes.result.movies;
var image = data[index].art.poster;
image = image.replace("image://","");
return decodeURIComponent(image);
]]]
This displays a image.
Works great.
What I what now is to click that image and call the MQTT service with the movie ID. But for that I need to extract it from the JSON sensor with the index. My question was, can I, in the template, with the Javascript declare a variable to use later in the click action. Somting like " variables.movieid = data[index].movieid" (this does not seems to work).
Just perform the exact same template inside your service_data for the mqtt service but donât bother declaring a variable.
tap_action:
action: call-service
service: mqtt.publish
service_data:
payload: >
[[[
var index = variables.index - 1;
var data = entity.attributes.result.movies;
return data[index].movieid;
]]]I may have misunderstood but I believe this is what youâre asking for if not sorry 
Try this if you have card-mod installed, play with the transition as you see fit.
style: |
}
:active
ha-card {
background-color: blue;
transition: .05s;
}
ha, that could be cool (small copy typo there btw?)
trying this:
style: |
:active
ha-card {
transition: .05s;
}
in my button_card_templates doesnât work however, should that be possible, or can we only set this in an individual button itself?
That worked! Thank you!
Man your my hero, I just tested it in my enviroment ant it worked flawless. exakly as me and my wife want it. And you know, Happy wife happy life 
Im getting a good night tonight 
I did this to make it work
style: |
:active
ha-card {
background-color: black;Yes, you are correct typo on my part. Iâve corrected it.
Currently, Iâm not using a template, I donât see why it shouldnât work. I tested it on several buttons on the same tab and it worked just fine.
Glad I could help and I clearly understand happy wife happy life 
not sure, but I canât get it to work. Would it be the already set styles on the button_card_template prevent this transitional style to do its job maybe? (note a button with only this set or styling does work, so its not the styling perse, its about the combination)
I am trying to use a custom card as a custom field, but I am getting a js error in chrome
Uncaught (in promise) DOMException: Failed to execute 'whenDefined' on 'CustomElementRegistry': "custom:circle-sensor-card" is not a valid custom element name
The code for thge custom field is
custom_fields:
valve:
card:
entity: 'sensor.valve_position'
fill: transparent
max: 100
min: 0
stroke_width: 10
type: 'custom:circle-sensor-card'
The circle sensor card shows up in the button so it works as expected, but the Console is filled with these errors.
Anyone has any idea if there is a problem with custom cards inside custom_field?
Iâm curious to know what is used to obtain the raspberry pi cpu/temp/etc sensors used in this example please?
Is it perhaps the Glances utility? https://github.com/nicolargo/glances
You have this one too:
