Adding an Arrow to Button that Changes Color on Hover

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: 

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;
}

Technically what you have should work. The problem is that the url for the content doesn't exists.

content: url(/s/iconmonstr-arrow-20.svg)!important;

You need to fix that url. Unfortunately I can't give you the right answer because I don't know where you've placed that file.

Hmmm.. strange. This URL works...

https://tarantula-calliope-fl4m.squarespace.com/s/iconmonstr-arrow-20.svg

Interesting – I hosted it through the squarespace.... I've hosted somewhere else and it shows, but I don't know how to make it white on hover. 

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

that worked! thanks!