Hoh to change arrow color/background color when hover

Issue

I would like to change both the background color (from transparent to #07b8b5) and the color of the arrow (from #07b8b5 to WHITE) when hover the ss-go-top the button.

I can only change the background color of the button but not the inside arrow's color..

I am a beginner, please if something is missing to understand the question let me know and I'll clarify. Thank you)) –

Here the HTML and CSS code:

ss-go-top {
  z-index: 2;
  opacity: 0;
  border: 2px;
  border-style: solid;
  border-radius: 50%;
  border-color: #07b8b5;
  visibility: hidden;
  -webkit-transform: translate3d(0, 200%, 0);
  transform: translate3d(0, 200%, 0);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: fixed;
  bottom: 8.4rem;
  right: 4rem;
}

.ss-go-top a {
  text-decoration: none;
  border: 2px;
  display: block;
  height: 6.4rem;
  width: 6.4rem;
  border-radius: 50%;
  background-color: transparent;
  -webkit-transition: all .3s;
  transition: all .3s;
  position: relative;
}

.ss-go-top a:hover,
.ss-go-top a:focus {
  background-color: #07b8b5;
}

.ss-go-top svg {
  height: 1.2rem;
  width: 1.2rem;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  left: 50%;
  top: 50%;
}

.ss-go-top svg path {
  fill: #07b8b5;
}

.ss-go-top.link-is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
 

<div class="ss-go-top">
                <a class="smoothscroll" title="Back to Top" href="#top">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0l8 9h-6v15h-4v-15h-6z"/></svg>
                </a>
            </div>

Solution

Add hover style to SVG path worked for me

ss-go-top {
  z-index: 2;
  opacity: 0;
  border: 2px;
  border-style: solid;
  border-radius: 50%;
  border-color: #07b8b5;
  visibility: hidden;
  -webkit-transform: translate3d(0, 200%, 0);
  transform: translate3d(0, 200%, 0);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: fixed;
  bottom: 8.4rem;
  right: 4rem;
}
.ss-go-top a:hover svg, .ss-go-top a:hover svg path {
    fill: #fff;
}
.ss-go-top a {
  text-decoration: none;
  border: 2px;
  display: block;
  height: 6.4rem;
  width: 6.4rem;
  border-radius: 50%;
  background-color: transparent;
  -webkit-transition: all .3s;
  transition: all .3s;
  position: relative;
}

.ss-go-top a:hover,
.ss-go-top a:focus {
  background-color: #07b8b5;
}

.ss-go-top svg {
  height: 1.2rem;
  width: 1.2rem;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  left: 50%;
  top: 50%;
}

.ss-go-top svg path {
  fill: #07b8b5;
}

.ss-go-top.link-is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
 

<div class="ss-go-top">
<a class="smoothscroll" title="Back to Top" href="#top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0l8 9h-6v15h-4v-15h-6z"/></svg>
</a>
</div>

Answered By - Jaswinder Kaur