I tries to set color of a link such that it automatically adjusts its color as compared to its background-color. I search for this problem and found that this can be done with the help of blend-mode or background-blend-mode. I tries but didn't able to make the same behavior. Here is my html and css code. Please help.
.full-section {
min-height: 100vh;
}
.bg-black {
background-color: #000;
}
.bg-white {
background-color: #fff;
}
.bg-gray {
background-color: #e3e3e3;
}
.top-nav {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
zindex: 5;
overflow: hideen;
background-color: transparent;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.all-center {
align-items: center;
justify-content: center;
}
.align-end {
justify-content: flex-end;
}
.logo {
color: #fff;
text-decoration: none;
mix-blend-mode: difference;
}
.button {
background-color: #fff;
color: #000;
text-decoration: none;
width: 180px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
mix-blend-mode: difference;
background-blend-mode: difference;
}
.button:hover {
background-color: #000;
color: #fff;
text-decoration: none;
}<div class="row top-nav flex all-center"><div class="col-md-3"><a href="#" class="logo">Logo</a></div><div class="col-md-9 flex align-end"><a href="#" class="button">Contact Us</a></div></div><div class="row full-section bg-black"></div><div class="row full-section bg-white"></div><div class="row full-section bg-gray"></div></div>