Hover Effekt Style

[MarvinMynx]

Is your feature request related to a problem? Please describe. The default built-in HomeAssistant button card has an over effect. When you hover over a button with the mouse, it lights up slightly. The custom-cards button-card has a click animation (though I couldn't find any settings for this), but it lacks hover animation and settings completely. Additionally, the custom-cards button-card doesn't reset the button's animation if you click a button and then move away, so you effectively don't click the button anymore when you let go of the mouse click, meaning it will stay highlighted even after letting go of the mouse click.

Describe the solution you'd like Additional style parameters for hover and click animation settings and colors.

Describe alternatives you've considered N/A

Additional context Default Built-In HomeAssistant Button Card Hover: Default Built-In HomeAssistant Button Card Click: custom-cards button-card Hover: custom-cards button-card Click:

Configuration:

type: custom:button-card
show_name: true
show_icon: true
color: orange
tap_action:
  action: perform-action
  perform_action: remote.send_command
  target:
    entity_id: remote.harmonyhub
  data:
    num_repeats: 1
    delay_secs: 0.4
    hold_secs: 0
    device: "71382108"
    command: PowerToggle
entity: remote.harmonyhub
icon: mdi:power
name: TV Power
show_state: false
styles:
  card:
    - background-color: "#112233"
    - border-radius: 0%
    - padding: 0%
    - margin: 0%
    - color: ivory
    - text-shadow: 0px 0px 5px black
    - filter: opacity(75%)

[Mariusthvdb]

aware this is not what you are looking for, but maybe for the time being: add a template like

hover:
  card_mod:
    style: |
        ha-card:hover {
          transform: scale(1.1);
          transform-origin: top center;
          z-index: 1;
          transition: all 0.5s;
        }

can do what ever transform you would like, and probably more. ofc this requires card_mod

you can probably copy the exact hover effect from the sources you mention and paste it in that card_mod

there is also this on the feedback during a click

[MarvinMynx]

Hmm, I don't know how to create my template. ^^ The docs say that I should copy the template code into the raw editor of the whole dashboard, but my try didn't work. ^^ But using your card-mod code without a template is working, and the effect of yours is not bad as well. Many thanks! :)

[mattbeatt]

aware this is not what you are looking for, but maybe for the time being: add a template like

hover:
  card_mod:
    style: |
        ha-card:hover {
          transform: scale(1.1);
          transform-origin: top center;
          z-index: 1;
          transition: all 0.5s;
        }

can do what ever transform you would like, and probably more. ofc this requires card_mod

you can probably copy the exact hover effect from the sources you mention and paste it in that card_mod

there is also this on the feedback during a click

You dont need the card-mod for this, just use extra_styes option the custom button card supplies something like

extra_styles: | ha-card:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); }

[dcapslock]

ha-ripple has been available since 2024.6 so migrating from mwc-ripple to ha-ripple will bring this in automatically. It will break any styling where --mdc-* variables have been used as these will need to migrate to --ha-ripple-* variables. Some investigation to default ripple color should be done to match home assistant as much as possible. Also, when to apply ripple would need to be carefully looked at - there is _isClickable() but that is true if there are any child cards, which would not be quite correct. Finally, ripple would be effectively disabled if custom style of - --ha-ripple-color: var(--card-background-color) is used so users would always be able to control in this manner.

@RomRider any thoughts on this before I proceed to submit a PR?

[Mariusthvdb]

reading your comment on the migration to ha-ripple, I searched the codes in HA and found this:

https://github.com/home-assistant/frontend/blob/dev/src/components/ha-ripple.ts#L45

reason I need that is because of the 'mimic' style button-card I use to replicate the action button on the energy panel cards:

core card:

which does not ripple, only hover.

working button-card config template:

styles_action_button: #used in picture elements to mimic core HA Dashboard action
  styles:
    card:
      - border-top-color: var(--divider-color) # rgba(0, 0, 0, 0.12)
      - border-top-style: solid
      - border-top-width: 1px
      - padding: 8px 0px
      - --mdc-ripple-press-opacity: 0

however, this does not work, and still shows the ripple

styles_action_button: #used in picture elements to mimic core HA Dashboard action
  styles:
    card:
      - border-top-color: var(--divider-color) # rgba(0, 0, 0, 0.12)
      - border-top-style: solid
      - border-top-width: 1px
      - padding: 8px 0px
      - --ha-ripple-pressed-opacity: 0

used in:

      - type: custom:button-card
        template: styles_action_button
        name: >
          <ha-button appearance="plain" size="small" variant="brand">
          Ga naar het energiedashboard</ha-button>
        tap_action:
          action: navigate
          navigation_path: /energy

is this --ha-ripple-pressed-opacity: 0 not supported?

btw, I need the template because of the divider shown in the core card, and mimic that to with the top border (used in a picture-elements card that does not accept a divider by itself)

without template no divider:

and both show ripple because they're a button-card...

[dcapslock]

is this --ha-ripple-pressed-opacity: 0 not supported?

Correct. button-card ripple currently uses mwc-ripple not ha-ripple

[RomRider]

In order to avoid a breaking change, can we remap --mdc-* to the equivalent HA CSS variables?

[dcapslock]

I think so. Would the main ones be color and opacity?

[RomRider]

I believe those are the most used ones, yes.

[github-actions[bot]]

:tada: This issue has been resolved in version 5.0.0-dev.4 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 5.0.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: