JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapperA">
  <button id="button1" class="buttonOne">buttonOne 1</button>
  <button id="button2" class="buttonOne">buttonOne 2</button>
</div>
<div class="wrapperB">
  <button id="button5" class="buttonTwo">buttonTwo 1</button>
  <button id="button6" class="buttonTwo">buttonTwo 2</button>
</div>
  <button id="modButton" class="modButton">modButton</button>

CSS

.modButton {
    position: relative;
    left: 250px;
}
.wrapperA {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}
.buttonOne {
    position: relative;
    border-radius: 40%;
}
.wrapperB {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}
.buttonTwo {
    position: relative;
    border-radius: 40%;
}
.tuck {
    z-index: 1;
}

JavaScript

function app() {
   document.querySelector('.modButton').addEventListener('mousedown', () => {
            document.querySelector('.wrapperA').classList.toggle('tuck');
        });
   document.querySelector('.modButton').addEventListener('mouseup', () => {
            document.querySelector('.wrapperA').classList.toggle('tuck');
        });

}
app();