Transform flickering - html

Question

When I hover the mouse over the box and try to click on the button but flickering occurs.
Can some one help me please I dont know who to fix it.
JSFiddle: https://jsfiddle.net/PedroTavares/fv7qjw8b/3/
.box {
margin-top: -1.5rem;
position: relative;
width: 250px;
height: 250px;
background-color: #06F;
transition: all .3s cubic-bezier(.34,1.61,.7,1);
z-index: 1;
}
.box:hover {
transform: translateY(-80px);
}
.box-btn{
margin-top: -3rem;
width: 250px;
display: flex;
justify-content: center;
}
button{
margin: 5px;
}
<div style="margin-top: 110px;" ></div>
<div>
<div class="box"></div>
<div class="box-btn">
<button> Text </button>
<button> Text </button>
</div>
</div>

Answer 1

I believe that this is solution for you.
I just add `.wrap` class around `.box` and now you can click on buton when hovering.
.box {
margin-top: -1.5rem;
position: relative;
width: 250px;
height: 250px;
background-color: #06F;
transition: all .3s cubic-bezier(.34,1.61,.7,1);
z-index: 1;
}
.wrap {
display: inline-block;
}
.wrap:hover .box {
transform: translateY(-80px);
}
.box-btn{
margin-top: -3rem;
width: 250px;
display: flex;
justify-content: center;
}
button{
margin: 5px;
}
<div style="margin-top: 110px;" ></div>
<div class="wrap">
<div class="box"></div>
<div class="box-btn">
<button> Text </button>
<button> Text </button>
</div>
</div>