How can I select all elements that has the same class name? I'm having trouble using the method .getElementsByClassName().

This is my js code.

let pop_up = document.querySelector('#overlay')
let button = document.getElementsByClassName('button')
let close_popUp = document.getElementById('close__pop_up')

function open_popUp() {
    pop_up.style.display = 'block'
}

button.addEventListener('click', open_popUp)  

close_popUp.addEventListener('click', function(){
    pop_up.style.display = 'none'
})

And this is my html:

<section class="membership__options">
          <div class="membership__options__card">
            <img src="./assets/img/drinks-1.jpg" alt="Drinks" />
            <p class="membership__price">10% OFF</p>
            <p class="membership__description">Bar</p>
            <button class="button membership__button" type="button" value="Submit">sign up</button>
          </div>
          <div class="membership__options__card">
            <img src="./assets/img/live-music.jpg" alt="Singer singing" />
            <p class="membership__price">15% OFF</p>
            <p class="membership__description">Live Music</p>
            <button class="button membership__button" type="button" value="Submit">sign up</button>
          </div>
          <div class="membership__options__card">
            <img src="./assets/img/drinks.jpg" alt="A guy drinking" />
            <p class="membership__price">20% OFF</p>
            <p class="membership__description">Bar + Music</p>
            <button class="button membership__button" type="button" value="Submit">sign up</button>
          </div>
        </section>