Button element: problem with hover state

1

Hi,
I have a button with the icon + text. I’ve set hover states for each one. Problem is that when I hover over the icon only the icon changes, the same goes for the text. Any way to make them change in simultaneously?
Thanks.

2

Hi @tole011 ,

what is the initial state of the button and icon and what are you trying to change on hover?

3

I have a transparent icon and text in a normal state. In hover mode changes the color of the icon and text. Problem is that transitions are done separately.

4

Ok,

try to remove the typography settings (color) on the icon at both states and set the hover color under Button > Style > Typography. This way, both elements should get the same color at the same time on hover.

5

I figured that… I would like to have separate colors and effects… :slight_smile:
Thanks for your time.

6

Aaaah ok, now i understand :smiley:

Seems like this is not possible out of the builder at the moment, because the hover state of the icon is seperate from the button hover state.

But you can easily “fix” that with a few lines of custom css.

/* Button Typography Color */
root .bricks-button:hover span {
  color: red;
}

/* Button Icon Color */
root .bricks-button:hover i {
  color: blue;
}
1 Like