javascript - Change Button Font Color on Hover With "Hover color" declared on each button tag not in CSS

Question

It's not a duplicate question - I don't want to simply change the font color in CSS.

My Issue:

I have products with colors. Blue, Red, Green, Yellow, Purple - any kind of color.

I have a box with the same color -

And Inside this box I have a button "BUY"

I can create this button dynamic - with the same color of the box.

If the box is blue - the button is blue with white border and white font color.

If the box is red - the button is red with white border and white font color.

the CSS (Inverse Button):

.btn-inv {
    color: #ffffff !important;
    background-color: transparent;   
    border: 1px #ffffff solid;
    box-shadow: none;
}

But in hover

.btn-inv:hover {
    color: #000000;
    background-color: #ffffff;
    border: 1px #ffffff solid;
}

The button goes to white - and the font color to black.

THE ISSUE: I NEED THE FONT COLOR IN THE SAME COLOR OF THE BOX - if the box is blue, the font color is blue.

Of Course - If I change the CSS - I can do this.

But I need a dynamic way to do this - because I cannot create ALL buttons colors..

something using "style":

<a href="#" class="btn btn-inv btn-lg" style=".HOVER: color: #4a62ab">BUY</a>

or anyother ideia with the color inside the tag. because with this I can simply send the correct color information and create the button dynamically.

If I have 80 colors - I can use the same CSS for ALL - and just send the correct via ASP to dynamically complete the button.

and I don't need to create 80 CSS Buttons just because of this.

Answer 1

Consider CSS variables like this:

a.btn {
 padding:0 10px;
 color:#000;
 border:1px solid;
}
a.btn:hover {
  color:var(--h, yellow);
}

<a href="#" class="btn btn-inv btn-lg" style="--h: #4a62ab">BUY</a>
<a href="#" class="btn btn-inv btn-lg" style="--h: red">BUY</a>
<a href="#" class="btn btn-inv btn-lg" style="--h: green">BUY</a>
<a href="#" class="btn btn-inv btn-lg" style="--h: #4a00fb">BUY</a>
<a href="#" class="btn btn-inv btn-lg">BUY</a> <!-- this one will get the default color (yellow) -->