Button card color by state

This is my lovelace yaml so far. What is the easiest most direct way to make the cover and the lock red when closed/locked and green when open/unlocked?

cards:
  - entity: cover.garadget
    hold_action:
      action: more-info
    name: Garage Door
    show_icon: true
    show_name: true
    show_state: false
    tap_action:
      action: toggle
    type: button
  - entity: lock.door
    hold_action:
      action: more-info
    name: Front Door
    show_icon: true
    show_name: true
    show_state: false
    tap_action:
      action: toggle
    type: button
  - entities:
      - entity: sensor.door_battery
    type: glance
type: vertical-stack

By default the icon color will change based on your selected theme. There isn’t a way to override it without using an addon. The card-mod will allow you to apply css styles to almost any card (can be installed manually or via HACS). It will work for the button. In your example for the garage and front door add the following style key (after installing card-mod and adding the js url to your resources):

cards:
  - entity: cover.garadget
    hold_action:
      action: more-info
    name: Garage Door
    show_icon: true
    show_name: true
    show_state: false
    tap_action:
      action: toggle
    type: button
    style: |
      :host {
        --paper-item-icon-color: red
      }
      :host {
        --paper-item-icon-active-color: green
      }

  - entity: lock.door
    hold_action:
      action: more-info
    name: Front Door
    show_icon: true
    show_name: true
    show_state: false
    tap_action:
      action: toggle
    type: button
    style: |
      :host {
        --paper-item-icon-color: red
      }
      :host {
        --paper-item-icon-active-color: green
      }