Ive tried without that style to make sure that was or was not the problem. I just paste in the code with it here.
I have more of the vertical stacks. But this one is on top of the page. Theres only one above it.
Maby i should try to remove the one above it to se if it stops. Just for test sake.
It happens when i use the input_select in that code combination. but not is i change the entity to a switch or some other entity.
the first main page / view.
Removed the top card just for testing and now had the remote @ the top. And problem is still there.
So seems to be something in the remote that causes it.
From all my testing all i can say it must be something that has not been toutch inside of it yett. Or its a bugg when you use
- CUSTOM BUTTON - In vertical / horizontal stack
- ENTETIES - with a Inputselect
- Custome buttons again. - In vertical / horizontal stack
entity: switch.dyson_cool_fan_power
name: Dyson Fan
type: 'custom:button-card'
icon: 'mdi:fan'
template: hk_switch
state:
- icon: 'mdi:power'
value: 'off'
- icon: 'mdi:fan'
spin: true
value: 'On'
When the button is On the icon isnt spinning!
Because you wrote On instead of on.
Thanks, changed it but no change. However i noticed if i put spin: true in the template hk_switch under the on state it works however that now animates my other switches.
If i only want this one switch to animate how would i do that? I read the merge by ID but i dont fully understand it.
if your other switches use the same template then why are you surprised?
try to compare what makes your non-working switch different from others.
I can confirm that I was able to configure my switch individually using config I posted earlier.
@RomRider I seem to have maybe found another issue. Iāve done away with the concept of a button-card as my parent card, with a vertical-stack in a custom_field. I now just use a mod-card as the parent (to style the vertical-stack) and now all the button-cards are at the same level within horizontal-stacks. I have a label button that doesnāt really do anything as a button, but is just a label. It works great if I define the whole button in the card config. But as soon as I copy the config over as a config template for a starting point, the card does not display anything except the outline of the button much shorter then it should be (due to no text or icon). Thereās no error output to the console, but it just doesnāt display anything. Doesnāt seem to respond to the styles defined either.
Here is the config template:
button_card_templates:
label_button2:
- color: '#6f9FCF'
color_type: label-card
double_tap_action:
action: none
hold_action:
action: none
icon: 'mdi:stairs-up'
layout: icon_name
name: Upstairs
show_name: true
show_icon: true
styles:
card:
- background-color: '#6f9FCF'
- box-shadow: '3px 3px 5px 4px #2f5f7f'
- padding: 0
- height: 100%
grid:
- grid-template-areas: i n
- grid-template-columns: 1fr 1fr
- grid-template-rows: 100%
tap_action:
action: none
power_button:
variables:
var_name: "Power Off"
name: '[[[ return variables.var_name; ]]]'
entity: 'remote.harmony_hub'
color_type: icon
icon: 'mdi:power'
layout: icon_name
state:
- value: 'on'
styles:
icon:
- color: 'rgb(249,65,55)'
tap_action:
action: >
[[[
return(entity.state && entity.state === 'on' ? 'call-service' : 'none');
]]]
service: remote.turn_off
service_data:
entity_id: '[[[ return entity.entity_id; ]]]'
hold_action:
action: none
double_tap_action:
action: none
styles:
card:
- background-color: '[[[ return(entity.state && entity.state === "on" ? "#6f9FCF" : "inherit"); ]]]'
- box-shadow: '[[[ return(entity.state && entity.state === "on" ? "3px 3px 5px 4px #0f3f5f" : "inherit"); ]]]'
- padding: 0
grid:
- grid-template-areas: "i n"
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
icon:
- color: 'rgb(239,239,239)'
And here is the card config:
card:
cards:
- cards:
- type: 'custom:button-card'
template: label_button2
- entity: remote.harmony_hub
template: power_button
type: 'custom:button-card'
type: horizontal-stack
title: Harmony Master Bedroom
type: vertical-stack
style: |
ha-card {
background-color: #202020;
padding: 0 10px 10px 10px;
}
type: 'custom:mod-card'
Thereās no javascripting going on for the label_button2 template. Just a complete copy and paste from the card config to the config template. One works (card config), the other doesnāt.
Iāll try moving it to the config template piece by piece and see if I can identify a particular section thatās tripping it up.
@RomRider
Some more info on my post above. I started moving a few lines at a time from the card config to the config template.
As soon as I moved the icon and name fields to the config template, they disappeared from the button, but the button was still the proper color and height.
When I moved the styles over, then the button goes back to the default colors and what looks like min-height. So for some reason itās not picking up the values in the template. My other 3 config templates are working fine and as expected. The example I put above has the power button next to the label card and the power button works as expected. A real head scratcher.
You have a - at the beginning of your template label_button2 
it is supposed to be an object, not an array. Probably a copy paste error while moving your config over to the template 
Create a template that hasnāt any state, call it master for eg with all your styles etcā¦ then create another template based on the master template for your switches and another for the fan with the state object you want. You can make templates out of other templates.
I knew it was going to be something stupid like that. I didnāt see it in my current code, but I had moved the config back to the card config. I moved it back to the config template again and itās working.
One other question. If Iām going to have a config template use another config template and they both declare variables, do the variables get merged? Better with an example:
button_card_templates:
template1:
variables:
var_foo: foo
var_bar: bar
styles:
icon:
- color: red
template2:
template: template1
variables:
var_foobar: foobar
styles:
card:
- background-color: black
In this case would variables end up with 3 entries if you are using template2?
Yes, and if you redefine one that already exists, itās going to override its parent, like it does for all the fields in the whole config (objects are merged, arrays are concatenated appart from state if you use the id field, in this case itās merged also)
Speaking about templates - thanks for the new beta, Iāve just tested it and it works fine in simple cases.
However, I just want to clarify that this case should work the way it works:
variable_colors:
variables:
color_state_icon: black
variable_new_colors:
variables:
color_state_icon: green
button_base:
template: variable_colors
styles:
icon:
- color: '[[[ return variables.color_state_icon ]]]'
button:
template:
- button_base
- variable_new_colors
It seems like you evaluate templates when they are used to create another template/card and that means in button template inclusion of variable_new_colors template wonāt have any effect as button_base is already evaluated using color_state_icon from variable_colors and therefore icons will always be black, is that correct?
No, in this case, the icon color should be green. javascript templates are only evaluated when they are used not when the config is merged together at the beginning.
The resulting config would be (no evaluation while setting the config):
variables:
color_state_icon: green
styles:
icon:
- color: '[[[ return variables.color_state_icon ]]]'
yes, thatās right - I was a bit confused because some of my cards use button_base so they remained black. user error 
what does that āsetting the configā bit mean?
Setting the config means assigning the config to the button, this happens when you update the button config. Then what I do is I merge all the templates together and āreplaceā your config with the resulting merged config.
This is not related directly to button-card, but maybe someone here has run into this and knows how to get around it. If I have a javascript template like this:
- box-shadow: >-
[[[
let shadow_color = "var(--ha-card-box-shadow)";
if (states[variables.var_hubentity].state && states[variables.var_hubentity].state === 'on') {
shadow_color = "3px 3px 5px 4px #2f5f7f";
}
return(shadow_color);
]]]
I sometimes get an error (like right now) from the yaml parser saying:
missed comma between flow collection entries at line 173, column 23:
if (states[variables.var_hubentity].state ...
^
If I try and use that code in the raw config editor, I get the same error when trying to save it and it wonāt save.
So far, the only workaround Iāve found is to put the entire javascript the same line as the key surrounded by single quotes, i.e.
- box-shadow: '[[[ return(states[variables.var_hubentity].state && states[variables.var_hubentity].state === "on" ? "3px 3px 5px 4px #2f5f7f" : "var(--ha-card-box-shadow)"); ]]]'
Which lovelace then turns into:
- box-shadow: >-
[[[ return(states[variables.var_hubentity].state && states[variables.var_hubentity].state === "on" ? "3px 3px 5px 4px
#2f5f7f" : "var(--ha-card-box-shadow)"); ]]]
and the yaml parser doesnāt complain about either of the last 2.
Anybody have any thoughts?
Youāre identation is off:
- color: >-
[[[
let shadow_color = "var(--ha-card-box-shadow)";
if (states[variables.var_hubentity].state && states[variables.var_hubentity].state === 'on') {
shadow_color = "3px 3px 5px 4px #2f5f7f";
}
return(shadow_color);
]]]
Sorry, thatās just in my post. I didnāt have the key in there originally and I misplaced it when I added it here. Hereās the whole thing pasted in as-is:
- box-shadow: >-
[[[
let shadow_color = "var(--ha-card-box-shadow)";
if (states[variables.var_hubentity].state && states[variables.var_hubentity].state === 'on') {
shadow_color = "3px 3px 5px 4px #2f5f7f";
}
return(shadow_color);
]]]
Itās not even for the color: key 
Itās for the box-shadow key. I fixed the original post.