Transform flickering-CodePudding

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 ></div>
  <div >
    <button> Text </button>
    <button> Text </button>
  </div>
</div>

CodePudding user response：

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 >
  <div ></div>
  <div >
    <button> Text </button>
    <button> Text </button>
  </div>
</div>