Changement de couleur bouton actif

QuentinTE64
Les bases HTML/CSS

Bonjour a tous, debutant en html/css/javascript, j'ai réalisé une carte avec le plugin qgis2web, j'ai modifié le html pour y inclure des boutons de selection de couche qui desactive les autres couches, je voudrais que la couleur de fond du bouton actif change lorsqu'il est actif, je n'y arrive pas, voici le code pour mes bouton ainsi que le style utilisé. il y a bien entendu le reste du code qui initialise la map, les zoom, etc. Merci pour votre aide


        html, body, #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        h1 {
            font-family: "Trebuchet MS", sans-serif;
            font-size: 32px;
            text-align: center;
            color: #46505a;
        }
        .button-container {
            position: absolute;
            top: 240px;
            left: 10px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
        }
        .layer-button {
            margin: 5px;
            padding: 10px;
            background-color: #32b9c8;
            border: 1px solid #ffffff;
            cursor: pointer;
            font-family: "Trebuchet MS", sans-serif;
            color: #ffffff;
            font-size: 16px;
        }
        .layer-button.active {
            background-color: #9b3287;
        }
        .layer-button:hover {
            background-color: #32b9c8;
        }
    </style>
    <title>Luminosité du ciel nocturne</title>
</head>
<body>
    <h1>Luminosité du ciel nocturne</h1>
    <div class="button-container">
        <button class="layer-button" id="layer1Button">Luminosité en coeur de nuit en 2021</button>
        <button class="layer-button" id="layer2Button">Luminosité en coeur de nuit en 2022</button>
        <button class="layer-button" id="layer3Button">Luminosité en extrémité de nuit en 2022</button>
    </div>"
   document.getElementById('layer1Button').addEventListener('click', function() {
                map.removeLayer(layer_Luminositencoeurdenuiten2022_2);
                map.removeLayer(layer_Luminositenextrmitdenuiten2022_3);
                map.addLayer(layer_Luminositencoeurdenuiten2021_1);
            });

            document.getElementById('layer2Button').addEventListener('click', function() {
                map.removeLayer(layer_Luminositencoeurdenuiten2021_1);
                map.removeLayer(layer_Luminositenextrmitdenuiten2022_3);
                map.addLayer(layer_Luminositencoeurdenuiten2022_2);
            });

            document.getElementById('layer3Button').addEventListener('click', function() {
                map.removeLayer(layer_Luminositencoeurdenuiten2021_1);
                map.removeLayer(layer_Luminositencoeurdenuiten2022_2);
                map.addLayer(layer_Luminositenextrmitdenuiten2022_3);
            });

        </script>
    </body>
</html>"

Aucune réponse