<div class="box">
    <div class="circle"></div>
    <button class="btn">Button</button>
  </div>

.box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.circle {
  width: 100px;
  height: 100px;
  background: orange;
  border-radius: 50%;
}

.circle:hover ~ .btn {
  transform: translateX(-100px);
  opacity: 1;
}
.btn {
  position: absolute;
  right: 40px;
  z-index: -1;
  opacity: 0;
  transition: transform 1s, opacity 1s;
  will-change: transform, opacity;
}