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;


Link to comment
  • Replies 0
  • Views 1.5k
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • 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.