Hide text with button - problem with styling

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?


.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:

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

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

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.

    background: #0056b3 !important;