i have a go to top button and i want to change its text and outline color to white when the background of button is dark so that its text is visible

Question

HTML CODE

<button
id="scroll-top"
(click)="scrollTop()"
style="background: url('scroll.svg') center 0px no-repeat"
>
Go to Top
</button>

CSS CODE

#scroll-to-top {
display: flex;
justify-content: center;
align-items: end;
position: fixed;
width: 90px;
height: 66px;
bottom: 50px;
right: 6px;
z-index: 999;
opacity: 0;
transition: all .2s ease;
transform: translateY(100px);
border: none;
cursor: pointer;
color: green;
font-size: 12px;
}

I want to change the outline-color(when focus is on button) and text color of my button to white when the background is dark(i.e when background is having any color other than white).

I have tried using mix-blend-mode and filter properties but i am bit confused here.

NOTE: i don't want to explicitly set the outline-color and text color as white rather it should be decided dynamically based on the background color of the button

Answer 1

  <button id="scroll-top" (click)="scrollTop()">
  Go to Top
  </button>

  


#scroll-top {
display: flex;
justify-content: center;
/* align-items: end; */
/* position: fixed; */
width: 90px;
height: 66px;
/* bottom: 50px; */
right: 6px;
/* z-index: 999; */
/* opacity: 0; */
transition: all .2s ease;
/* transform: translateY(100px); */
/* border: none; */
cursor: pointer;
color: green;
font-size: 12px;
}


#scroll-top:hover{
border: 2px solid white;
background: black;
color: white;
} 

Answer 2

#scroll-to-top {
display: flex;
justify-content: center;
align-items: end;
position: fixed;
width: 90px;
height: 66px;
bottom: 50px;
right: 6px;
z-index: 999;
opacity: 0;
transition: all .2s ease;
transform: translateY(100px);
border: none;
cursor: pointer;
color: green;
font-size: 12px;
}

#scroll-to-top {
display: flex;
justify-content: center;
align-items: end;
position: fixed;
width: 90px;
height: 66px;
bottom: 50px;
right: 6px;
z-index: 999;
opacity: 0;
transition: all .2s ease;
transform: translateY(100px);
border: none;
cursor: pointer;
color: green;
font-size: 12px;
}

#scroll-to-top:focus {
 color: white;
 background: white;
}

For the focus on the button you can use the :focus pseudo class. When you change the background of your page you can give your button another class to change its background.