Don’t think you can. You’d have to play with margins and card size.
1 Like
Your reply made me turn on an idea light: I solved the problem applying the glow at the card, and setting same size at the card and the glow, now the only clickable area is the icon.
Something like this:
template_name:
size: 35px
show_name: false
styles:
card:
- height: 35px
- width: 35px
- background: transparent
- border-radius: 100%
- -webkit-box-shadow: 0px 0px 40px 20px var(--button-card-light-color)
- box-shadow: 0px 0px 40px 20px var(—button-card-light-color)
icon:
- border-radius: 100%
- height: 35px
- width: 35px
thanks
Yep, that’s about the best you can do unfortunately.
1 Like
Is it possible to include an editable input_datetime entity within a button by any chance?
I’m looking for a solution to display this editable entity in as small a space as possible, so I can neatly integrate it within my layout. So far it seems the only way is via an entities card, which adds too much gumf for my needs. 
e.g. like this entities card but smaller and with no border or extra text:
Thanks.
input_datetime:
test:
name: Test
has_date: false
has_time: true
initial: '21:00:00'
ui-lovelace.yaml
- type: entities
show_header_toggle: false
entities:
- entity: input_datetime.test
to do something similar (using input_number though) I user stack-in-card and inside I have Entities card that has button-cards to display labels and units and original input_text customised to have no icon and no label, here’s how it looks
Not sure it’s possible to just use your input_datetime in button-card directly - maybe you can do it by generating html code instead of plain text but I haven’t tried it.
You should use card-mod for that, it’s going to be way easier. You’ll be able to hide what annoys you and resize the card easily.
@RomRider Actually, I mentioned in one of my previous posts that as an attempt to see if state was an issue, I created two template sensors one for my upstairs hub and one for my downstairs hub. Those sensors use the current activity as the state, which is why the later code looks like that.
Do you or @petro have an example of a template switch for a remote button that’s just a press and release type (momentary)? Like the “OK” button shown in your screenshot. From what I can see of template switches, they are like normal switches meaning they are on or off. Whereas a remote button is on while you press it, then off when you release.
Remote buttons are not switches, it’s just a button without an entity:
- type: custom:button-card
size: 80%
aspect_ratio: 1/1
icon: mdi:arrow-up-bold
styles:
card:
- padding: 6px
grid:
- border-radius: 50%
- box-shadow: var(--ha-card-box-shadow, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2))
entity_picture:
- padding: 10px
- width: 55%
- filter: invert(100%)
name:
- font-weight: bold
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.living_room
device: 44119728
command: DirectionUp
hold_action:
action: call-service
service: remote.send_command
repeat: 300
service_data:
entity_id: remote.living_room
device: 44119728
command: DirectionUp
thanks for the example.
just wanted to ask - is the styles section generic here as for this particular button with no entity styling of name is irrelevant, isn’t it?
It’s a good point and I should have mentioned I’ve tried using that and ended up with this so far:
- type: entities
show_header_toggle: false
style: |
ha-card {
padding: 0px;
border-radius: 0px;
height: 45px
}
entities:
- entity: input_datetime.test
It’s good to know I’m on the right track so will google CSS options to see if I can discover what works.
Thanks!
apart form that (actually, before doing that), you’ll need to investigate how your input_datetime is constructed in HTML and then find out what to change to get the desired result (as the element in question might be deep inside ha-card or there might be no ha-card visible at all as it’s inside shadow-root - all sorts of stuff).
That will hide the text and the icon on the entity line:
- entity: input_datetime.test
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
div.text-content {
display: none;
}
petro, one more question:
this is a valid template, it retuns a nice text for me
{{ as_timestamp(strptime(states.calendar.pergola_quintens_gmail_com.attributes["start_time"], '%Y-%m-%d %H:%M:%S')) | timestamp_custom('%A @ %H:%M') }} : {{ states.calendar.pergola_quintens_gmail_com.attributes["message"] }}
how can i use that the button name?
i tried :
#- name: "[[[return `${as_timestamp(strptime(states.calendar.pergola_quintens_gmail_com.attributes["start_time"], '%Y-%m-%d %H:%M:%S')) | timestamp_custom('%A @ %H:%M') }} : {{ states.calendar.pergola_quintens_gmail_com.attributes["message"] }`]]]"
also with some extra {{ }} , but always got syntax error?
format it please, also one template is jinja, the other is js. You can’t copy one to the other. It’s completely different code.
yeah, trying too
edit: thats why, ok not gonna work then
created now some extra sensors for those, but i want them to be removed if not needed
You’ll have to make a template sensor with that jinja and use that instead. The code can be performed in JS but it’ll be completely different.
yeah; i have some template sensors now with jinja, but wanted to remove those, if i could use it directly in the button itself, the less sensors, the better
no problem
I have tried and tried but I can’t seem to find a way to accomplish it. Could you give me an example where window.location is used?
Many thanks.
I did exactly the same and then noticed my UI is slower that it used to be - because what used to be executed in backend is now executed by your browser and on slower devices you can see the impact.
Keep it in mind.
it’s literally the first result if you google “url of page javascript”.
what have you tried anyway?
1 Like
Thank you @RomRider, I never would have thought to use style within an entity like that, and it helped point me in the right direction. Just FYI, using Chrome’s inspector I found that padName was needed instead of text-content.
I apologise that this is off-topic, but if it helps I am using it in conjunction with button cards… 
I’m just stuck on the final bit now. How do I reduce the overall entities card width? I can’t find the required element within Inspector, probably because it’s all foreign to me. I think it’s related to hue-entities-card as seen in the screenshot below, but my experiments using this within Style have failed so far.
- type: entities
show_header_toggle: false
style: |
ha-card {
padding: 0px;
border-radius: 0px;
height: 45px;
box-shadow: none;
background: none;
}
.card-content {
padding: 0 0 0 0px;
}
entities:
- entity: input_datetime.test
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
div.padName {
display: none;
}
If I simply use width: 50px as an example within ha-card, it cuts off the text but the overall card size stays the same width, as seen here:
I’ve grown too accustomed to how great and customisable your button card is, so working with other cards is somewhat cumbersome now.