[MC-XOBAHCK]

в css можно либо при наведении (:hover) либо :active менять стили

Не совсем так, через CSS можно и просто назначить курсор для элемента, без всяких hover и active.

мне же нужно, что бы при клике на кнопку (нажал кнопку - поменялся курсор, отпустил - вернулся прежний)

Не совсем понятно и в вопросе нет никакого исходника html-макета.

Если поможет, приведу такой пример:

<style>.test{display: inline-block; width: 50px; height: 50px; margin-right: 15px; border: solid 1px #ccc;}</style>


<div class="test" style="background: red;"></div>
<div class="test" style="background: blue;"></div>
<div class="test" style="background: brown;"></div>
<div class="test" style="background: yellow;"></div>
<div class="test" style="background: orangered;"></div>
<button id="btn">Сменить курсор</button>


<script>
    document.querySelector('#btn').addEventListener('click', function() {
        let cursorArr = ['e-resize', 'col-resize', '-webkit-grab', 'all-scroll', 'pointer'];

        this.classList.toggle('cursor-active');
        
        let blocks = document.querySelectorAll('.test');

        if (this.classList.contains('cursor-active')) {
            this.textContent = 'Вернуть курсор';
            blocks.forEach((el, i) => el.style.cursor = cursorArr[i]);
        }
        else {
            this.textContent = 'Сменить курсор';
            blocks.forEach((el, i) => el.style.cursor = 'auto');
        }
    })
</script>