Icon Color Button Hover

Hi, is there any way to change the colour of the icon on hover the button? On mouse over the color of the button is changing but the icon still has the same color.

I’m not sure if that possible. You can use a class for the button and then create another class for the icon but when you hover over the button it does not change the icon unless you hover over the icon.

My guess is they are two separate elements.

Casey

Hallo, hast Du diesbezüglich mittlerweile eine Lösung gefunden?
Frohen 3. Advent

Hi, leider habe ich keine Lösung bisher gefunden. Dir auch frohen Advent.

Hall Ralf @RME

Ich habe eine Lösung:

add the following code to the the page settings:

  <style>

.button-text {
  color: black;
  background: transparent;
  border-color: black;     
}

.button-text:hover {
	 color: yellow;
	  background: transparent;
  border-color: yellow;
  } 

.button-text:hover .iconbtn {
	 color: yellow;
  } 
   
   </style> 

Then add button-text class to the button and iconbtn to the icon.

MDS

@MDS, Vielen Dank für die Sonntägliche Mühe.
Leider hakt es bei mir.
Der Butten nimmt den Code im Header an, das Icon leider nicht.

Hi Karl @pixelwork

No sure what is wrong with your setup…

You can follow the video clip below which shows how to proceed:

MDS

3 Likes

Perfekt. Vielen Dank. It works great.

Bitte sehr.

MDS

Super, jetzt klappts auch mir - herzlichen Dank

:wink:

MDS

Hi, can you upload another time this guide in english?