Highlighting Selected Button

Configuration Frontend
1

Hello,

I am new to Home Assistant and currently trying to design my UI for the upcoming smart home project.

I try to use Mushroom for UI and got stuck with some configuration.
I currently have a Section on the left with a horizontal and vertical stack where vertical stack is a custom-state-switch. I use the buttons on the top to select different floors and then the plan is to use some bubbles to select rooms indiviually.

I would like to highlight the buttons selected in horizontal-stack (floor selection) but did not manage to do that. Would someone guide me, if there is a simple way to do so? I tried show-state: on but it did not help, possibly due to buttons not being connected to entities :s.

UI
UI272×1083 258 KB

type: horizontal-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: navigate
      navigation_path: "#B"
    icon: mdi:home-floor-b
    show_state: true
    hold_action:
      action: none
    theme: Mushroom
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: navigate
      navigation_path: "#G"
    icon: mdi:home-floor-g
    show_state: true
    hold_action:
      action: none
    theme: Mushroom
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: navigate
      navigation_path: "#1"
    icon: mdi:home-floor-1
    show_state: true
    hold_action:
      action: none
    theme: Mushroom
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: navigate
      navigation_path: "#O"
    icon: mdi:home-plus
    show_state: true
    hold_action:
      action: none
grid_options:
  columns: full
  rows: auto

type: custom:state-switch
entity: hash
default: G
transition: slide-left
transition_time: 1000
states:
  "1":
    type: vertical-stack
    cards:
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: bedroom
        show_camera: false
        navigation_path: ""
        theme: Mushroom
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: kinderzimmer
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: kids_room_ii
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: washing_room
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: office_room_ii
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: bathroom_ii
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: hall_ii
  B:
    type: vertical-stack
    cards:
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: fitness_center
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: laundry_room
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: cellar_i
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: cellar_ii
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: technical_room
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: bathroom_iii
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: hall_iii
  G:
    type: vertical-stack
    cards:
      - camera_view: live
        alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: living_room
        show_camera: true
        navigation_path: "#livingroom"
        theme: Mushroom
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: kitchen
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: dining_room
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: winter_garden
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: office_room_i
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: badezimmer
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: hall_i
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: sanitaryware
  O:
    type: vertical-stack
    cards:
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: garden
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: garage
      - type: area
        area: attic
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: front
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: neighhbour_i
      - alert_classes:
          - motion
          - moisture
        sensor_classes:
          - temperature
          - humidity
        type: area
        area: neighbour_border

Regards,

2

format it properly

3

I formatted the code.

4

If the question is for this horiz stack only - then I would suggest to post a code for THIS card only, otherwise it creates a distraction.
And posting a simplified code greatly increases your chances to get a solution fast.
Check this code:

type: horizontal-stack
cards:
  - type: button
    entity: sun.sun
  - type: button
    entity: sun.sun
  - type: button
    entity: sun.sun
  - type: button
    entity: sun.sun

изображение

So, what is the question - you want these buttons to be highlighted on a mouse hover?

type: horizontal-stack
cards:
  - type: button
    entity: sun.sun
    card_mod: &ref_card_mod
      style: |
        ha-card:hover {background: yellow;} 
  - type: button
    entity: sun.sun
    card_mod: *ref_card_mod
  - type: button
    entity: sun.sun
    card_mod: *ref_card_mod
  - type: button
    entity: sun.sun
    card_mod: *ref_card_mod

изображение

5

Thank you Ildar for the notice, I posted to forum for the first time. I will be more careful.

I understand your example and just get to know card_mod. Does it only work with Minimalist or can I use it with other themes as well? E.g. default theme of HA with Sections layout?

Apart, I plan to use touch display and would like to highlight when it is clicked (but one of them only at a time, if I select third button in your example after the second one; second one should be dehighligted). Hover would serve for this maybe but selection of other panes in the same page should not cause a dehighlight if possible. I plan to use this menu as a sidebar with some other elements where this menu is expected to switch between floors.

6

Have no idea about Minimalist.
Even do not know if card-mod works with it.
An advise to a beginner: do not use Minimalist if you want to have more control on your setup. Themes like Minimalist offer some set of consistently looking cards - but it hides lots of things from a user.

Card-mod works with a default theme.
The “section layout” is a type of a view, not related to a theme.

7

Do not think this is possible with card-mod since it changes css properties for elements and “:hover” is the only way to customize a “hovered” element (OK, not a css guru myself & may be wrong).