yes, Iāve just discovered we can put most anything there, a simple null works too 
Best leave it out completely then, I donāt really like useless code.
about the entity in the view:
I tried it on a simple button:
- name: Sonorisation
entity: input_boolean.notify_system
show_name: true
icon: mdi:speaker
type: custom:button-card
card_mod:
style:
<<: *exist
using the same test trick (delete the last character of the entity, still shows the card)
maybe this should be done from within the button-card, but for educational purposes of card-mod Ireally like to have a go at it here too.
because, and here comes the full monty, if we can figure it out, it needs to be combined with a rather huge card_mod
maybe even that should be done in the button card with the extra_styles option I now realize.
- name: Sonorisation
entity: input_boolean.notify_system
show_name: true
icon: mdi:speaker
styles:
custom_fields:
wave:
- background-color: rgba(0,0,0,0)
- position: absolute
- right: 5%
- top: 5%
- font-size: 13px
- line-height: 20px
- display: |
[[[
if (states['input_boolean.notify_system'].state == 'on') return '';
else return 'none';
]]]
- '--icon-color': |
[[[
if (states['input_boolean.notify_system'].state == 'on') return 'var(--icon-color-on)';
else return 'var(--primary-color)';
]]]
card:
- border: 2px solid var(--primary-color)
- border-radius: 10px
icon:
- color: var(--primary-color)
name:
- font-variant: small-caps
- color: var(--primary-color)
custom_fields:
wave: |
[[[
return `
<div class="loader-container">
<div class="loader-3">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
</div>
</div>`
]]]
type: custom:button-card
card_mod:
style: |
.loader-3{
width: 40px;
height: 40px;
}
.loader-3 div {
height: 100%;
width: 3px;
display: inline-block;
}
.loader-3 div .item-1{
height: 50%;
}
.loader-3 .item-1 {
animation: loader-3-first-div 1.2s infinite linear;
background-color: red;
}
.loader-3 .item-2 {
animation: loader-3-second-div 1.2s infinite linear;
animation-delay: -1.1s;
background-color: darkorange;
}
.loader-3 .item-3 {
animation: loader-3-third-div 1.2s infinite linear;
animation-delay: -1.0s;
background-color: gold;
}
.loader-3 .item-4 {
animation: loader-3-fourth-div 1.2s infinite linear;
animation-delay: -0.9s;
background-color: green;
}
.loader-3 .item-5 {
animation: loader-3-last-div 1.2s infinite linear;
animation-delay: -0.8s;
background-color: DarkOrchid;
}
@keyframes loader-3-first-div {
25%,75% {
transform: scaleY(0.2);
}
0%,50%,100%{
transform: scaleY(0.6);
}
}
@keyframes loader-3-second-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-third-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-fourth-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-last-div {
25%,75% {
transform: scaleY(0.2);
}
0%,50%,100%{
transform: scaleY(0.6);
}
}
Well itĀ“s working (basically) for me. Even the need for using the 