Custom Button Card 3: Home Assistant Icons: Borders, Backgrounds and Advanced Animation

[@dsdlonyer]

This has changed my home assistant life. Thank you

[@3ATIVE]

That's really great to hear, thank you for the support. 👍

[@Paullik83]

Thanks, apreciate! Now my dashboard is alive, because of you. 💗

[@3ATIVE]

No No... Thank you! Paul Andrei. - It's comments like yours that make the whole thing worth-while. 💖

[@maxturlad9127]

Wow, wow and wow again. Super tutorials to keep like a Bible. Thank you.

[@3ATIVE]

LOL thanks Max... I am finding people are liking my style. 😎 I got a couple more 'Software' tuts coming then I'm getting back in to converting hardware for HA.

[@Scribbby]

I love this series! I can follow the step-by-step guide very easily. Extremely informative and helpful. Thank you!

[@3ATIVE]

I'm happy to hear that Scribby. Thanks for the feedback, it means so much hearing how my li'vids are helping people. 💖

[@Rickr522]

Such a clear tutorial on everything Custom Button Card. Awesome work and thank you for sharing.

[@3ATIVE]

You are most welcome and thank you for the wonderful feedback, it makes it all worth while.

[@alhubo]

awesome video, made the buttons on my dashboard really standout.

[@3ATIVE]

👍I'm glad you liked it. Is there anything you'd like to see next?

[@ludovicdecque6417]

Thanks a lot, An excellent tutorial, i have learned a max ;)

[@3ATIVE]

Great to hear! Have seen the rest of this series - Loads more to play with 😉

[@NunoSoares22]

Wow! Great work! Thanks for sharing all this!

[@3ATIVE]

Thanks again Nuno. More to come, Part 4 is in writing. ! 😊

[@alcidesmarcano]

Thanks again David! Another awesome MasterClass!

[@3ATIVE]

I was wondering when you were gonna get to this video, I almost posted a link in my reply to your comment on Part 2! 🤣🤣 However, once more I thank you for the awesome comments and feedback! 💕

[@thierry3610]

Thank you for the time & effort! Just when I thought it couldn't get better you take it to another level! I'll need to set aside a few hours to play.

[@3ATIVE]

Thank you for the compliment - Have fun. 💕 - Also, I'm not done... I'm writing Part 4 soon! 😎

[@thierry3610]

@@3ATIVE make that a whole day of playing 😂

[@3ATIVE]

@@thierry3610 😂😂😂😂😂😂😂

[@stevefromuk]

Another great tutorial... I like how you explain what the code is doing when your putting it in. Cheers

[@3ATIVE]

Thank you for the encouragement. 👍 - Yeah, typing whilst talking is getting easier! LMAO

[@borolo222]

Best Home assistant tutorials. Period.

[@3ATIVE]

OMG, thank you. Such high praise - I'm Humbled.

[@1domotico]

Thank you, I like tutorial , it's magic.

[@3ATIVE]

Thank you! Cheers!

[@garysteo3398]

your hired great job

[@3ATIVE]

LOL, thanks man. Enjoy. 👍

[@pvollas]

Nice job Sir! Thank you very much

[@3ATIVE]

Thanks for the feedback, so nice of you. I hope you find it useful. 👍

[@MrMduzee]

You are the best

[@3ATIVE]

Thank you for the compliment - more to come in this series. :)

[@randrcomputers]

Any videos you plan on doing adding a custom hepatic sound to a card when state changes?

[@3ATIVE]

Do you mean like for a Tablet or Phone Dashboard?

[@randrcomputers]

@@3ATIVE yes on Amazon fire 10 tablet as example. Would be great to see how to add sounds to keypress

[@3ATIVE]

@@randrcomputers I see... Hmmm, that could be fun to play with. I'll look in to it asap.

[@randrcomputers]

@@3ATIVE awesome. I am assuming I’d put a .wav in the www folder but not sure if browser mod is needed aswell. Your videos are very well done and I thank you for them!

[@mew0717]

great series.... subbed for sure. Any additional custom card tutorials would be super! I'm happy to recommend 3-5 i'm in the process of trying to figure out how to use :)

[@3ATIVE]

Excellent, thank you for the support. I have one more 'Custom Card' tutorial coming.

[@OrlandoColonJr]

Getting into Home Assistant and Home Automation. Love you tutorial videos. For some reason when I use the code I will get the error "unexpected end of the stream within a single quoted scalar ". Anywhere I can buy your codes?

[@3ATIVE]

Cool, welcome to the party and thank you for the kind words. I don't sell my code however, if you join my Discord Server, I'd be happy to help you out: discord.com/invite/3RbZgvHeJ9

[@stevefromuk]

Hi I've now pimped up quite a few of my buttons now thanks to these videos, Just wondering I have 3 custom buttons that link to 3 different scripts and I've set the flame icon to flicker red when one is pressed. Is it possible when one is pressed it can stay red and flickering for a set time then back to normal after. Can that be done in the button or maybe a automation. Thanks

[@3ATIVE]

That's great, thanks for the feedback... It makes it all worthwhile. I'm not sure it'll do that without some custom JAVA. - I think you're better off going with an HA automation or something in your script

[@umair392]

Nice tutorial. Can you make animation of water level (percentage) with a water tank image?

[@3ATIVE]

Thank you. For that water level thing, take a look at the "Fluid Level Card" - You'll find it in HACS.

[@umair392]

Thanks for the reply. I tried using fluid level card but can't seem to change height and width with standard commands for cards and there is not much information on these cards. I ended up using bar card. It has more information and examples but is very basic(visually).

[@WayneRigley]

Awesome, any way you could help with getting the icon smaller to 40px, I've been placing that line everywhere and nada LOL I'm using it on a phone dashboard, thanks in advance

[@3ATIVE]

OMG So sorry... I totally missed this question. Yeah, you can custom size a card with this: styles: card: - width: min(40px) - height: min(40px)

[@marksimpkins5242]

Hi loving your you tube vids on this subject i am a total beginner and following your part series into custom button cards can i ask what may be a very stupid question but can i place a custom button card inside a custom mini media player on the dashboard. i have built a mini media player ok and add radio stations using script buttons but when i change this to custom button card and try to add a border to the radio station button it saves ok in the visual editor but nothing happens any help on how to set this up would be great. thanks.

[@3ATIVE]

Aww thank you Mark, I'm glad you're both using my tutorials and finding them so helpful. As for your custom media player setup - I can' really answer that without seeing how you've set it up, sorry. If you'd like, come join my Discord server: discord.com/invite/3RbZgvHeJ9 where you'll be able to share your code and we can [maybe] work something out for/with you.

[@marksimpkins5242]

Brilliantly mate will do as soon as I get chance even if I get as good as 1% of your Knowledge about home assistant as you do then I will be on to a winner thanks for your help mate

[@3ATIVE]

@@marksimpkins5242 Flattery won't get you priority support... _But, it helps!!!_ 😜 Cool, catch you there soon. 👍

[@Samsa-]

Thank you so much for your videos! I'll try to figure out, how to change the color of my card based on if my phone is charging or not - while it shows the battery level. Battery level works fine, but i can't get the colorchange to work. Any tipps? Or is there a video with an example? Thanks!

[@3ATIVE]

You are welcome, it's good to hear they are helping you. As for the phone charging, I have a button on my dashboard for that. For mine it flashes when charging but, you can adapt it for your needs, here's my code: type: custom:button-card entity: sensor.daves_phone_battery_state name: Phone state: - value: charging name: Charging color: LimeGreen styles: icon: - animation: blink 2s ease infinite - value: discharging color: SteelBlue styles: card: - font-size: 15px

[@Samsa-]

​@@3ATIVE Wow! I didn't expect a full code, thanks! I'm still struggeling to combine this with my card. I can't figure out how to add the second sensor (for the state in this case). Do i need a "custom-field" entry? As of now my code looks like this: type: custom:button-card entity: sensor.myphone_battery_level show_state: true name: Jans Telefon styles: card: - height: 108px - width: 120px - font-size: 12px state: - value: 20 operator:

[@3ATIVE]

@@Samsa- LOL, that's ok... it was easier to give an example than to explain! Now I can see what you have, I understand more of what you're going for. So, add this to your 'state:' and adjust to suit. - operator: template value: | [[[ return (states["sensor.daves_phone_battery_state"].state === 'charging') ]]] styles: card: - background: red This will take the 'state' of the battery and change the card background to red. Obviously the 'level' you are using is a different sensor coming from your phone.

[@Samsa-]

@@3ATIVE That worked! Awesome! ".state === 'on')" did the trick! Thank you so much!

[@3ATIVE]

@@Samsa- Excellent, happy to help. I hope I've earned a Sub! 👍

[@petertaylor7134]

Hello mate love your content and thanks for helping me out last time. Is it possible to have a button that will change if more than one entity is open or closed? Possibly using node red? I want to have one button that will flash and change icon if one of my windows/doors is open, as in all windows shut it displays a window shut icon and one or more open displays window open?

[@3ATIVE]

Hey Peter, thanks again - I'm glad I was able to help and I don't think I'm gonna disappoint on this question either! 😂 Sounds to me like you need an "OR" gate. That will be On if ANY (or multiple) of its inputs are On. Then turn Off once every input is Off... - It just so happens I have something similar running here. Check out this Node-Red add-on: flows.nodered.org/node/node-red-contrib-bool-gate You could then use the output of this to change the state of your Button / Icon / Colour / etc.

[@petertaylor7134]

@@3ATIVE Thanks mate I will have a good read of this. You are the oracle!

[@petertaylor7134]

Hello mate hope you are well? I haven't managed to get this working. I am happy wit the OR gates, really useful, but displaying the output to lovelace has beat me. I have been trying to use an entity node with no results. Am I on the right path or is there a better way? I have no idea how to set the entity node up and there doesn't seem to be any information on it .

[@waelzayed]

Thanks again for this amazing series. I want to reduce down the size of the card and icon to fit it inside a picture element. Is there any documentation for these options?

[@3ATIVE]

Thank you for the kind words, it's really appreciated. Have watched all of them now? - If so, thanks again.👍 😢 I'm not sure I can help with your particular use-case, sorry - I don't use the Picture Card on my dashboard. However, you may want to check the 'Custom Card' and 'Picture Card' Docs for options.

[@RHillJason]

Thanks for your video. Hope you can help with a background question: I would like the background to be changed based on a input select state. The input select state display the image name which i need to add to the URL. I hope the below attempt gives meaning. styles: card: . - background: >- url(/local/images/picture_slides/ {{state('entity}} ) it is basically a picture slide show which is why i want it as a template due to alot of pictures that changes name every month. hope you can assist.

[@3ATIVE]

Interesting... So you want to use an input_select to be able to change the background of a "Custom Button" card, right?

[@RHillJason]

@@3ATIVE precisely. :)

[@3ATIVE]

@@RHillJason Ah ok... then you could do something like this: styles: card: - background: | [[[ var image = states["input_select.images"].state; return 'url(/local/picture_slides/'+(image)+')' ]]] ****** Obviously adjust for your entities and folder paths. 😉 ********

[@3ATIVE]

@@RHillJason My input_select is just: images: name: images options: - image1.jpg - image2.jpg - image3.jpg - image4.jpg - image5.jpg

[@RHillJason]

@@3ATIVE Thanks. That worked perfectly. 😀 Last question. I have set my input select to change picture every 5 sec. Can i add an effect to the transistion between the actual and next picture? Bonus question. instead of having an input_select could i instead just link to a folder where all the pictures are and show them one by one? thanks for create support.

[@geeksoares736]

Good evening, how do I reduce the size of the button, I've tried everything I can change the width of the image but not the card

[@3ATIVE]

It can be tricky as every extra card added will shrink the whole row. The best you can do is use something like this: styles: card: - height: 90px You can add a "- width: xxx" here too but that can make it look pretty bad. 😊

[@david78455]

Hi the background gif I put is too big for the card size. is there any way to shrink the gif size so it will fit the card size ? Thanks a lot love your channel - David

[@3ATIVE]

Hi David, thank you - I'm glad you like my channel / videos. ❤ As for you Gif size, like I showed in the video, if you use 'round' at the end of the url, it'll scale your image to fix. Depending on the shape of the image and the button, this may result in some stretching / shrinking... E.G.: background: url(/local/machine.gif) round

[@david78455]

@@3ATIVE Thanks I try it but the background disappear when I add the round function - background-image: url(/local/coldnew.gif) round I try also - background-image: 'url(/local/coldnew.gif) round,'

[@3ATIVE]

@@david78455 Sorry for the confusion. The example I put in the previous reply was just to illustrate the position of 'round'. For your code, use this: - background: >- url(/local/coldnew.gif) round

[@david78455]

@@3ATIVE Thanks Thanks Thanks :) it is working now

[@3ATIVE]

@@david78455 Excellent, more than happy to help ya fella. 👍

[@DementedDog]

What I'm really stuck on is how to test a state value based on an entity attribute. So, for formatting, one state is 'off' but, for the other state, I need to retrieve the value from the entity attribute 'source' and test if it is 'abc' before applying those formatting commands. I've hunted high and low but can't find anything that works!

[@3ATIVE]

Have you tried: Developer-tools > States ??

[@DementedDog]

@@3ATIVE I have - but I finally managed to do it. Tricky finding just what you need, but a few more hours of trawling and tweaking did it 😁

[@DementedDog]

@@3ATIVE I knew how to go about It, just couldn’t get the code formatting right.

[@andrius1]

Hi, for me not working animation: twister, flasher. With blink or rotating all works.

[@3ATIVE]

Hi there, Sorry to hear that, obviously both work. Either there's something wrong with your setup or the coding is wrong. There's no way for me to suggest which without seeing what you have.

[@andrius1]

@@3ATIVE - type: custom:button-card icon: mdi:cctv show_name: false state: - value: 'on' color: red styles: icon: - animation: - twister 1.5s infinite card: - background-color: rgb(255, 255, 255, 0%) - value: 'off' styles: card: - background-color: rgb(255, 255, 255, 0%) styles: card: - box-shadow: 0px 0px 0px rgb(255, 255, 255, 0%) tap_action: action: toggle hold_action: action: more-info entity: light.0x00124b002351a2c1

[@3ATIVE]

@@andrius1 there's the problem, you haven't included the keyframe data. It's included in the video.

[@R2Flipside]

Trying the alarm button and everything is working except for the rotatez command I get no rotation. Also is the a } missing in your flasher script? type: custom:button-card show_name: true show_icon: true //show_state: true name: 'Leak Sensor #1' size: 70px state: - value: 'on' name: 'Leak Sensor #1 - Leak Detected!' color: red styles: icon: - animation: - twister .5s linear infinite card: - animation: - flasher 1s linear infinite extra_styles: | @keyframes twister { 0% {transfrom: rotatez(0deg); top: 10px} 25% {transfrom: rotatez(15deg)} 50% {top: -15px} 75% {transfrom: rotatez(-15 deg)} 100% {transfrom: rotatez(0deg); top: 10px} } @keyframes flasher { 50% {background: radial-gradient(rgb(0,0,0, 60%) 45%, RGB(220, 0, 0, 50%)); border: 5px solid rgb(220,0,0,50%)} } styles: card: - font-size: 20px tap_action: action: entity entity: binary_sensor.lumi_lumi_sensor_wleak_aq1_moisture

[@3ATIVE]

You spelt transform wrong - it's not "transfrom" LOL

[@R2Flipside]

@@3ATIVE lol what an idiot I am! Thanks so much been at staring at it for ages. Great tutorial 😀

[@R2Flipside]

@@3ATIVE is there a way to increase the icon size when it’s state in ON?

[@3ATIVE]

@@R2Flipside It happens, I often type it wrong too 😎 As for Icon size.... Not sure, I think the icon size is propositional to the card size.

[@claudiog_4_hydroponic]

Thanks for this video. I've a question... Your code working fine extra_styles: | @keyframes flasher { 50% {background: radial-gradient(rgb(255,0,0, 50%) 20%, rgb(255, 0, 0,70%)); box-shadow: 0px 0px 38px rgb (255,0,0, 100%); border: 5px solid rgb(200,150,150) } In my temperature button i want a background animation red for high temperature and one for low temperature- extra_styles: | @keyframes flasherhigh { 50% {background: radial-gradient(rgb(255,0,0, 50%) 20%, rgb(255, 0, 0,70%)); box-shadow: 0px 0px 38px rgb (255,0,0, 100%); border: 5px solid rgb(200,150,150) } @keyframes flasherlow { 50% {background: radial-gradient(rgb(240,255,255, 50%) 20%, rgb(240, 255, 255,70%)); box-shadow: 0px 0px 38px rgb (255,0,0, 100%); border: 5px solid rgb(200,150,150) } and - animation: | [[[ if (entity.state >= 41) return 'flasherhigh 1s linear infinite'; if (entity.state >= 31 && entity.state < 41) return 'flasherhigh 2s linear infinite'; if (entity.state >= 21 && entity.state < 31) return 'null'; if (entity.state >= 11 && entity.state < 21) return 'null'; if (entity.state >= 0 && entity.state

[@3ATIVE]

It's a limitation of the Custom Button Card - It can only use one set of @keyframes (the first one) - I have tried many ways to include another, sadly nothing works.

[@claudiog_4_hydroponic]

​@@3ATIVE Thanks for your attention!! Actually, TWO animations (@keyframes) are correctly handled in your code. I tried to replace your @keyframes twister with my @keyframes flasherlow (always 2 animation) but not work. It seems that when two animations are defined that do essentially the same thing, the second one is ignored. Anyway... I don't know what the right syntax is but this idea this might work? extra_styles: | IF if (entity.state >= 31) @keyframes flasher { 50% {background: radial-gradient(rgb(255,0,0, 50%) 20%, rgb(255, 0, 0,70%)); box-shadow: 0px 0px 38px rgb (255,0,0, 100%); border: 5px solid rgb(200,150,150) } ELSE @keyframes flasher { 50% {background: radial-gradient(rgb(240,255,255, 50%) 20%, rgb(240,255,255 ,70%)); box-shadow: 0px 0px 38px rgb (255,0,0, 100%); border: 5px solid rgb(200,150,150) } So always only one @keyframes flasher and - animation: | [[[ if (entity.state >= 41) return 'flasher 1s linear infinite'; if (entity.state >= 31 && entity.state < 41) return 'flasher 2s linear infinite'; if (entity.state >= 21 && entity.state < 31) return 'null'; if (entity.state >= 11 && entity.state < 21) return 'null'; if (entity.state >= 0 && entity.state

[@3ATIVE]

@@claudiog_4_hydroponic Sorry, yes... you are correct. You CAN have two animations running as long as they are not doing the same 'thing'. E.G. An animation the rotates in the X and another in the Y - As those are different from the 'flasher', that can be used too. So, like I showed in this video, there's an Translation AND a Rotation. Interesting idea with using IF / ELSE... I hadn't thought of (or tried) that. When I get some time, I'll have a 'Play'. 👍👍

[@labaland]

Why not adding the code in description?..

[@3ATIVE]

I didn't no. As this is part of a series, like with previous tutorials there are so many option... I thought I'd show you directly and you can type it what you want. It's good practice! 🤣

[@tangocdung]

please code button card. thanks bro

[@3ATIVE]

I wish I had time... there's already a guy that codes it anyway.

[@VPF_CanalEspirita]

Great job! Can you please share the code?

[@3ATIVE]

Thank you. - I did share my code, it's all there on screen. 😂

[@JVO62]

@@3ATIVE Hello excellent tutorial ... could you share the code of the input_boolean.tut_button? ... I'm new to this ... thanks

[@3ATIVE]

@@JVO62 Seriously ???

[@JVO62]

@@3ATIVE Yes ... seriously ... I already saw the three videos and I understood everything ... I have 2 weeks experimenting with HA .. but I was left wondering how to correctly create the input_boolean ... I think that's the only thing that stops me to apply everything from the videos .. Thanks in advance from Mexico !!

[@3ATIVE]

@@JVO62 www.home-assistant.io/integrations/input_boolean/

[@Paullik83]

- background: 'radial-gradiant(rgb(18, 81, 219, 50%) ,rgb(0, 0, 0, 50%))' Have no efect for me. no changes .. my background remain solid

[@3ATIVE]

Are you defo using the custom button card and is your line within the "card:" parameter and not under "icon:"??

[@Paullik83]

type: custom:button-card name: MOTION not Detected icon: mdi:walk state: - value: 'on' name: MOTION Detected icon: mdi:run color: rgb( 255, 0,100, 90%) styles: icon: - animation: - twister 0.2s linear infinite Card: - animation: - flasher 1s linear infinit extra_styles: | @keyframes twister { 0% {transform: rotatez(0deg);top: 10px} 25% {transform: rotatez(15deg);top: 15px} 50% {top: -10px} 75% {transform: rotatez(-15deg)} 100% {transform: rotatez(0deg);top: 10px} } @keyframes flasher { 50% {background: radial-gradiant(rgb(0,0,0, 50%) 20%, rgb(18, 19,251, 50%)); box_shadow: 0px 0px 20px rgb(18, 98, 231, 100%) border: 20px inset rgb(18, 89, 219, 50%) } styles: card: - height: 190px - font-size: 18px - border: 3px solid rgb( 255, 0,0, 90%) - background: radial-gradiant(rgb(18, 81, 219, 50%) ,rgb(0, 0, 0, 50%)) tap_action: action: toggle entity: group.motion

[@3ATIVE]

@@Paullik83 You spelt gradient wrong 🤣

[@3ATIVE]

@@Paullik83 Additional: Line 13 - No capital C on 'card' please Line 15 - Missing e on 'infinite'

[@Paullik83]

... Yes ... all good now. Thanks for your time, and help. 🤣🤣😅 What can I say?😊