Jump to content

Adding an Arrow to Button that Changes Color on Hover

Recommended Posts

Site URL: https://tarantula-calliope-fl4m.squarespace.com/

Hi there – hoping someone can help me have all buttons on my site have an svg icon to that changes on hover. I've been able to get the arrow in, but it seems to disappear after I leave the css panel.

here's what is should look like: 919473559_ScreenRecording2020-05-09at07_06AM.gif.5964ea3cc1dbf7416acd47137655b866.gif

site: https://tarantula-calliope-fl4m.squarespace.com/

Pass: squarespace

 

/* buttons */
.sqs-block-button-element {
  text-align: left!important;
  background-color:#fff!important;  
  border: 4px solid #000!important;
  color: #000!important;
  width: 100%!important;
  max-width: 500px!important;
  margin: 0 auto!important;
  display: block;
  padding: 25px;
  cursor: pointer;
}
.sqs-block-button-element:hover {
  background-color:#000!important;
  color:#fff!important;
  border: solid 4px #000!important;
}
.sqs-block-button-element:after {
  content: url(/s/iconmonstr-arrow-20.svg)!important;
  position: relative;
  right: -300px;
}

 

Link to comment

Hmm... well it's a black SVG. You can't change the color of an image using CSS. You'd have to modify the initial image and create a white copy of it, then update your CSS to change the content url onHover.

.sqs-block-button-element:hover:after {
  content: url(https://tarantula-calliope-fl4m.squarespace.com//s/iconmonstr-arrow-20-white.svg)!important;
  position: relative;
  right: -300px;
}

 

There are ways to encode an SVG so you can update it but the explanation is a bit long winded. Check out this link for more information: https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element

 

Link to comment

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.