Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hover Effekt Style #887

Open
MarvinMynx opened this issue Dec 12, 2024 · 2 comments
Open

Hover Effekt Style #887

MarvinMynx opened this issue Dec 12, 2024 · 2 comments
Labels
FR Feature Request

Comments

@MarvinMynx
Copy link

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:
Screenshot 2024-12-12 160746
Default Built-In HomeAssistant Button Card Click:
Screenshot 2024-12-12 160806
custom-cards button-card Hover:
Screenshot 2024-12-12 161144
custom-cards button-card Click:
Screenshot 2024-12-12 160800

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%)
@MarvinMynx MarvinMynx added the FR Feature Request label Dec 12, 2024
@Mariusthvdb
Copy link
Contributor

Mariusthvdb commented Dec 12, 2024

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
Copy link
Author

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! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FR Feature Request
Projects
None yet
Development

No branches or pull requests

2 participants