Как повесить cursor: progress на весь body, чтобы он не перекрывался при наведении на объект с cursor: pointer?

Хочется мне по клике на кнопку добавлять body класс с курсором при наведении, например:

.body-class:hover{
cursor: progress;
}

Но на странице куча кнопок с изменением cursor при hover .
Codepen
Проблема - после клика по кнопке курсор меняется везде, кроме как на самой кнопке. Логика понятна, но как обойти не очень понятно.
Присваивать кнопке другой курсор в JS тоже такое себе - кнопок на реальной странице много, всех не пересчитать.

Пока писал вопрос, был найден ответ) Но мне кажется это интересно и может кому полезно будет . Ответ под спойлером