Archived topic
Getting SVG icons to change from white to black on hover
7 replies · Started by CRAIG on May 13, 2021
I have some icons in the header of my homepage which are contained within buttons
When hovering over the button, the button background turns white
>>>> On hover, I would like the icon to transform from a white outlined icon to a black outlined icon <<<<
Could you please suggest the best way to achieve this?
I tried the fix suggested on another article, but it didn't quite do what I needed it to, although it appeared to be on the right tracks
I have shared the homepage link privately
Thanks
Craig
Hi there,
GBs icons only support SVG Fill colors at this time, and the <path> elements within the SVG have to include a fill attribute.
As your icons are all strokes - and not fills, this won't apply. In addition to this your paths are being styled by an inline style sheet using the .cls-1 selector.
So you could add some CSS like this to change the stroke of an icon when hovering over a button:
.gb-button:hover svg .cls-1 {
stroke: #000;
}Added the CSS to the page as suggested, using simple CSS. Worked perfectly.
You're just showing off David!
Lol :)
Glad to be of help !
Can we revive this?
I seem to have broken this somehow.
The following CSS is still in place, but now the icons disappear when I hover over the buttons.
.gb-button:hover svg .cls-1 {
stroke: #000;
}
Hi there,
I've checked the site and I see it being added but there seems to be a syntax error before the CSS.
This CSS - https://share.getcloudapp.com/12uAXQg8 - is missing a delimiter }
a.read-more { display: block; margin-top: 1em; should have a } after margin-top: 1em;
Thanks very much for your help. I should be more careful
No problem. :)
