How can I change multi styles onClick event?

I need to change style for 5 case with onclick event. for example,
if the user clicks on btn, need to change more than 3 different style.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function myFunction() {
    document.getElementById("pa-menu").classList.toggle("responsive-menu-action");
}
window.onclick = function(event) {
    if (!event.target.matches('.pa-header-right-responsive-menu-btn')) {
        var dropdowns = document.getElementsByClassName("pa-menu");
        for (let i = 0; i < dropdowns.length; i++) {
            let openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('responsive-menu-action')) {
                openDropdown.classList.remove('responsive-menu-action');
            }
        }
    }
}

<!-- language: lang-css -->

.pa-menu {
    width: 150px;
}
.customa {
    background: red;
}
.customb {
    font-size: 14px;
}

<!-- end snippet -->

The question is not clear.

The following code toggles 3 class names for the button when clicking on it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let btn = document.getElementById("btn");
btn.addEventListener("click", function (event) {
    btn?.classList.toggle("border-blue");
    btn?.classList.toggle("background-orange");
    btn?.classList.toggle("border-radius");
});

<!-- language: lang-css -->

.border-blue {
    border: 5px solid blue;
}
.background-orange {
    background: orange;
}
.border-radius {
    border-radius: 20px;
}

<!-- language: lang-html -->

<button id="btn" class="background-orange">Click me</button>

<!-- end snippet -->