How to invert the background/foreground colors of icon in hover/active state

  • Resolved myproverbialthoughts

    (@myproverbialthoughts)


    7 years, 10 months ago

    I’ve successfully customized the background/foreground color of my icons with something like the a2a_config.icon_color = “seashell,midnightblue”; example provided in the documentation.

    I’d like to invert these colors of a single button when it’s in a hover/active state. Is there something as simple as a2a_config.icon_color_hover = “midnightblue,seashell”; that I can add to the CSS to achieve this?

    Thanks in advance!

Viewing 1 replies (of 1 total)
  • Plugin Author micropat

    (@micropat)

    Currently this requires some Additional CSS code to get it just right:

    /* Icon background color */
.a2a_kit a:active .a2a_svg,
.a2a_kit a:hover .a2a_svg,
.a2a_menu a:active .a2a_svg,
.a2a_menu a:hover .a2a_svg { background-color: midnightblue !important; }

/* Icon foreground color */
.a2a_kit a:active .a2a_svg path,
.a2a_kit a:hover .a2a_svg path,
.a2a_menu a:active .a2a_svg path,
.a2a_menu a:hover .a2a_svg path { fill: seashell; }
Viewing 1 replies (of 1 total)
  • The topic ‘How to invert the background/foreground colors of icon in hover/active state’ is closed to new replies.