@elorenn
Posted
Try doing the following for the social icons:
/* this will turn them white and give you the proper pointing-hand-cursor */
.icon {
filter: brightness(5);
cursor: pointer;
}
/* this will turn them a bright pink on hover and when selected with keyboard */
.icon:hover, .icon:focus, .icon:active {
filter: brightness(2) hue-rotate(55deg) saturate(6);
}
Marked as helpful
@elorenn
Posted
@elorenn
The code in my original suggestion gives you a pink closest to the pink shown in the icons in the provided design images. However, the following code gives a pink closer to the pink you have on your button in hover state:
filter: brightness(2) hue-rotate(35deg) saturate(3);
@HollowZll
Posted
Thanks Lorena, appreciate the help! @elorenn