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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.