From 5b1c0b730056348768851ad5a3fba9ca01ca553f Mon Sep 17 00:00:00 2001
From: Cloos <36499953+Clooos@users.noreply.github.com>
Date: Thu, 15 Feb 2024 14:36:57 +0100
Subject: [PATCH] Styles and custom styles update for the HBS

---
 README.md | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 89bb45a..737928c 100644
--- a/README.md
+++ b/README.md
@@ -527,8 +527,8 @@ To change the background color of a single button in an `horizontal-buttons-stac
 ```yaml
 styles: >
   /* Selector for the '#kitchen' button */
-  .kitchen {
-    background: darkblue !important;
+  .kitchen > .color-background {
+    background-color: blue !important;
   }
 ```
 
@@ -582,6 +582,15 @@ But in all cards you can also use this:
  `hass.states['light.kitchen'].state` will return the state of `light.kitchen`.  
  `hass.states['light.kitchen'].attributes.brightness` will return the brightness attribute of `light.kitchen`.
 
+Here is an example on how you can change the background color of a button based on an entity for the horizontal buttons stack:
+
+```yaml
+styles: |
+  .kitchen > .color-background {
+    background-color: ${hass.states['light.kitchen'].state === 'on' ? 'blue' : 'red'} !important;
+  }
+```
+
 ## Custom components conflicts
 
 ⚠️ For now there are some features that are not working with: