Hide text with button - problem with styling

[kp90]

I am trying to add 2 buttons to a template that will show text when clicked on. The buttons work but when I hover the mouse over them they turn white from blue, how can I fix this?

CSS:

.hidden-content {
    display: none;
}
.button {
    margin: 5px;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}
.button:hover {
    background-color: #0056b3;
}

Template and JS:

<div>
<button class="button" onclick="toggleContent('definition')">Definicja</button>
<button class="button" onclick="toggleContent('example')">Przykładowe zdanie</button>
</div>
<div id="definition" class="hidden-content">
{{def1}}
</div>
<div id="example" class="hidden-content">
{{p1}}
</div>

<script>
function toggleContent(id) {
    var content = document.getElementById(id);
    if (content.style.display === "block") {
        content.style.display = "none";
    } else {
        content.style.display = "block";
    }
}
</script>

[Duude]

There must be something with Anki. It also doesn’t work for me.
You can still do a workaround by using only the “background” shorthand along a “!important” property for styling.

.button:hover 
{
    background: #0056b3 !important;
}