Button Card: Circle behind icon

Configuration Frontend
1

Hey there,

I’m trying to achieve a circle background for icons using Button-Card but I can’t get something that stays anchored (responsively) to the button’s size and position. I know this is because I’m currently manually placing the circle as a custom_field using absolute positioning, but I’m not familiar enough with CSS grid to do it properly.

So… what’s the best way to create a circle background relative to the main icon using button-card? I’m not looking for anything fancy, just something like this: image

Thank you!

2

Never use absolute positioning. My advice is: use a Mushroom card instead of a button card. You can tweak how the icon looks like by using its CSS. Sample here:

3

You may define a background color for the icon, compare these two:
– button-card with user-defined styles
– tile

type: vertical-stack
cards:
  - type: custom:button-card
    entity: sun.sun
    icon: mdi:weather-sunset-up
    show_state: true
    show_name: false
    styles:
      grid:
        - grid-template-areas: '"i s"'
        - grid-template-columns: 20% auto
      img_cell:
        - background-color: rgba(255,193,7,0.2)
        - border-radius: 50%
        - height: 40px
        - width: 40px
      icon:
        - color: var(--state-sun-above_horizon-color)
        - height: 24px
        - width: 24px
  - type: tile
    entity: sun.sun
    icon: mdi:weather-sunset-up

image

1 Like
4

This is EXACTLY what I was looking for. Thank you so much!

5

Thanks, Mushroom card is just a simple example. I actually generally need this in custom button for more complex layouts where I have “outgrown” Mushroom card hehe.

6

Any idea how to set the alpha for the background color using a similar variable color instead of explicitly?

7

Assume we need this:
color: rgba(x,y,z,alpha)
Since theme variables are like “green”, “rgb(0,255,0)”, “#00ff00”, you need to create a function to extract these x,y,z components. This may be done inside the button-card since it supports JS.

8

Ah, ok! Actually I found that the existing rgb variables work like this:

"rgba(var(--rgb-primary-color),0.2)";

I think this is because the rgb variables are just stored as the 3 values so they can be spliced in.

9

My faith in theme variables in not strong enough after 2022.12 sporadic changes:

  • let’s remove vars used by many people and say “these vars were never supported officially”;
  • let’s make new “–rgb-xxx” vars of “255,255,255” format - and make using them for people less convenient and in some cases not possible at all;
  • let’s refuse to revert to traditional css formats like “red”, “#ff0000”, “rgb(255,0,0)” (my issue);
  • let’s anyway revert silently to those traditional css formats;
  • let’s add new vars, remove another vars

— and during all these activities users have to change their setups.

10

any hint how to add more space between the text and icon?

image
image1292×653 45.6 KB

11

margin or padding may help