How do i add :hover and :active events to my tampermonkey injected script?

I’m injecting a script using tampermonkey (and html with css in the javascript) and i want to add :hover and :active events to my injected buttons to make them prettier
how do i do this?

        for (let region of data) {
            for (let lobby of region.lobbies) {
                let button = document.createElement('button');
                
                button.textContent = `${region.region} ${lobby.gamemode} ${lobby.numPlayers}p`;
                button.addEventListener('click', () => {
                    // TODO: add team integer
                    window.open(`https://diep.io/?ip=${lobby.ip}&g=${lobby.gamemode}&l=0x0`)
                });
                button.style.padding = "5px";
                button.style.border = "1px solid black";
                button.style.backgroundColor = colors[region.region] || "rgba(255, 255, 255, 0.5)";

                buttons.appendChild(button);
            }
            let br = document.createElement('br');
            buttons.appendChild(br);

this is where i update my buttons every second
i have tried asking people and googling but i havent found an answer

of course i cannot really add that css in without using javascript to do so