Need help with Mod Card styling

[hybrid sage]

I am trying to make a custom mod card for my ceiling fan and want the first button to look more like in the second picture and the speed buttons to turn blue when turned on but i cant find a way how...

type: custom:mod-card
style: |
  ha-card {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
  }
card:
  type: horizontal-stack
  cards:
    - type: custom:button-card
      entity: fan.deckenventilator
      icon: mdi:fan
      name: Fan
      show_state: false
      show_icon: true
      styles:
        card:
          - border: 1px solid white
          - border-radius: 10px
          - height: 40px
          - width: 100px
          - background-color: transparent
          - display: flex
          - align-items: center
          - justify-content: center
          - gap: 8px
        icon:
          - color: white
          - width: 20px
        name:
          - font-size: 14px
          - color: white
      state:
        - value: "off"
          styles:
            icon:
              - color: white
            name:
              - color: white
        - operator: default
          spin: true
          styles:
            icon:
              - color: deepskyblue
            name:
              - color: deepskyblue
            card:
              - background-color: rgba(0, 191, 255, 0.2)
    - type: custom:button-card
      name: "1"
      tap_action:
        action: call-service
        service: fan.set_percentage
        service_data:
          entity_id: fan.deckenventilator
          percentage: 20
      state:
        - value: 20
          operator: "=="
          styles:
            card:
              - background-color: deepskyblue
              - color: white
      styles:
        card:
          - border: 1px solid white
          - border-radius: 10px
          - height: 40px
          - width: 40px
          - background-color: transparent
        name:
          - font-size: 14px
          - color: white
    - type: custom:button-card
      name: "2"
      tap_action:
        action: call-service
        service: fan.set_percentage
        service_data:
          entity_id: fan.deckenventilator
          percentage: 33
      state:
        - value: 33
          operator: "=="
          styles:
            card:
              - background-color: deepskyblue
              - color: white
      styles:
        card:
          - border: 1px solid white
          - border-radius: 10px
          - height: 40px
          - width: 40px
          - background-color: transparent
        name:
          - font-size: 14px
          - color: white
    - type: custom:button-card
      name: "3"
      tap_action:
        action: call-service
        service: fan.set_percentage
        service_data:
          entity_id: fan.deckenventilator
          percentage: 50
      state:
        - value: 50
          operator: "=="
          styles:
            card:
              - background-color: deepskyblue
              - color: white
      styles:
        card:
          - border: 1px solid white
          - border-radius: 10px
          - height: 40px
          - width: 40px
          - background-color: transparent
        name:
          - font-size: 14px
          - color: white

the code is too long for the message but the rest looks the same...

[mighty crypt]

You shouldn't necessity need card_mod to make the custom:button-card look like a Mushroom card. I have a couple of examples that I've played with that i can post later tonight.

[hybrid sage]

that would be very helpful

[mighty crypt]

I will post the code for this later but here's what the example looks like. Should be able to use it as a guide. One is Mushroom and the other is custom:button-card.

[mighty crypt]

This isn't exactly an answer to your original question, but here's what I put together so far. This is a modification of the code from the screenshot above which was based on the Mushroom Light Card. This one is based on the Mushroom Fan Card. I stripped away some of the added stuff like the slider (but we can look into adding it back if you want.) The only added feature is the icon can be animated if you set the variable to true.
This should at least give you some ideas to move in the right direction. I'm assuming you were more interested in the layout.

type: custom:button-card
entity: fan.living_room_fan
variables:
  animate_icon: false
show_state: true
state_display: |
  [[[ 
      if (entity.state === 'on') 
        return entity.attributes.percentage + "%"
      else 
        return "Off"
  ]]]
styles:
  grid:
    - grid-template-areas: |
        "i n" "i s"
    - grid-template-rows: 1fr 1fr
    - grid-template-columns: min-content 1fr
    - column-gap: 10px
    - row-gap: 0px
  card:
    - height: 56px
    - padding: 10px
  name:
    - align-self: end
    - justify-self: start
    - font-weight: 500
    - font-size: 14px
    - padding: 0px
  state:
    - align-self: start
    - justify-self: start
    - font-weight: 400
    - font-size: 12px
  img_cell:
    - background: "#2c2c2c"
    - height: 36px
    - width: 36px
    - border-radius: 25px
    - padding: 0px
  icon:
    - color: "#6f6f6f"
    - height: 24px
    - width: 24px
state:
  - value: "on"
    styles:
      img_cell:
        - background: "#263927"
      icon:
        - color: "#51ac53"
        - animation: "[[[ if (variables.animate_icon) return 'rotating 0.8144629623753681s linear infinite' ]]]"
hold_action:
  action: more-info

Interestingly, when I was working on this, I found a bug with the img_cell background color. When I used an RGBA value, the color would not change when the fan was turned on. But, when using a HEX value, it works fine. 🤷