Remove / hide hover background color

[talormanda]

Goal

I am trying to get the hover over the icon to look exactly like when you hover over the button. Right now, it puts a little rectangle around it, which I don't like:

And if I disable it entirely, then the button loses the hover effect when you hover over the icon (meaning the button itself is no longer highlighted.

Source Yaml

.bubble-icon-container {
  --ha-ripple-color: orange !important;
}

/*
.bubble-icon-container ha-ripple,
.bubble-icon-container .mdc-ripple-surface {
  display: none !important;
}
*/

.bubble-button-card-container {
  border-radius: 12px !important;
  overflow: hidden;
  background: rgba(126, 140, 155, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none !important;
}

.bubble-name {
  font-size: 16px !important;
}

.bubble-icon-container {
  --mdc-icon-size: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  border-radius: 0 !important;
  background: none !important;
}

.large .bubble-icon-container {
  margin-left: 26px;
  background: none !important;
}

.bubble-icon {
  color: #44739e !important;
  opacity: 1 !important;
  filter: none !important;
}

.bubble-button-card-container * {
  background-image: none !important;
}

Which step did you already try?

No response

Problem

No response

Read the documentation

• I have read the documentation