Jump to content

Change the background color of the social icons on hover (SOLVED)

Recommended Posts

Site URL: http://johnbryandesign.com

Is it possible to change the background color of the social icon on hover using CSS with the Circle - Border style?

I had in my CSS "fill: white !important background-color: black" but this seems to only change the social media image line color inside of the border.

I am trying to create a hover effect to where it changes from Circle - Border to Circle - Solid.

I'm not sure how to accomplish this with CSS. Is it possible to make the style change on hover?

Thank you!




// Color On Hover Social Icons //
.social-icons-style-border .sqs-svg-icon--wrapper:hover .sqs-use--icon {
  fill: #FFFFFF !important;
  transition: all .7s ease 0s!important;

.social-icons-style-border .sqs-svg-icon--wrapper:hover {
  background-color: #000000 !important;
  transition: all .7s ease 0s!important;


Edited by jbryan
Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.