I have this html-markup. I make a button with class "open-window", it opens a pop-up window. This window can be closed by pressed button with class "close-window", and when you hover to this button it's background changed with time. After you click on this button, window became invisible, but button still visible for 0.4s (it's transition).

How to hide this button instantly after click and not delete it's background change?

<h3>Block title</h3>
<p>
    Block text.Block text.Block text.Block text.Block text.Block text.
</p>
<button class="open-window">Learn more</button>

<div class="window hidden">
    <button class="close-window">
        <span>×</span>
    </button>
    <h3>Block2 title</h3>
    <p>
        Block2 text.Block2 text.Block2 text.Block2 text.Block2 text.
    </p>
    <a href="" class="window-button">
        <button>Go to somewhere</button>
    </a>
    </div>
</div>
<style> 
.hidden{
    visibility: hidden;
}
.window{
    display: flex;
    flex-direction: column;
    height: 250px;
    background: lightgray;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    padding: 10px;
}
.close-window {
    position: fixed;
    background: green;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    border: black solid;
    border-radius: 50%;
}
.close-window:hover{
    background: blue;
    transition: 0.4s;
}
</style>
<script>
    let openButtons = document.getElementsByClassName('open-window');
    let closeButtons = document.getElementsByClassName('close-window');

    for (let i = 0; i < openButtons.length; i++) {
        openButtons[i].addEventListener('click', ()=>{
            openButtons[i].nextElementSibling.classList.toggle("hidden");
        })
    }

    for (let i = 0; i < closeButtons.length; i++) {
        closeButtons[i].addEventListener('click', ()=>{
            closeButtons[i].parentElement.classList.add("hidden");
        })
    }
</script>

I'm not sure about using visability here, but idk why display:none not working here. If i set display:none to class "hidden", a pop-up window is visible after a page is loaded and can not be closed.