Change Simple Social Icons Background & Hover Color

In this post, i’ll give you the CSS code which you can use to change the background and hover colors of each button when using the Simple Social Icons plugin.

Patrick asked:

Hi, does anyone know if there is a way to change the color and hover color of each icon individually for Simple Social Icons? That is, I’d like each icon to be its traditional colors instead of all being the same color.

Simply add this CSS at the end of your child themes style.css file and change the hex color codes to suit your own styling preferences.

.simple-social-icons .social-facebook a {
    background-color: #4965a0 !important;
}

.simple-social-icons .social-facebook a:hover {
    background-color: orange !important;
}

.simple-social-icons .social-gplus a {
    background-color: #dd4b39 !important;
}

.simple-social-icons .social-gplus a:hover {
    background-color: black !important;
}

.simple-social-icons .social-twitter a {
    background-color: #00abf0 !important;
}

.simple-social-icons .social-twitter a:hover {
    background-color: grey !important;
}

Float Icons Left or Right

.simple-social-icons {
    float: right;
}

Please check the FAQ on the plugin site for more details about which icons you can use.

The plugin has been developed by the lead developer of Genesis, Nathan Rice and StudioPress themes.