<div class="mainbtn button"><< CLICK ME <<</div>
<div class="box">
  <div class="hidebutton buttonHide">
    HIDE ME
  </div>
  
</div>

.mainbtn {
  display: inline-block; margin: 0 0 0 50px;
  font-size: 32px;
  cursor: pointer;
}
.hidebutton {
  color: #fff;  cursor: pointer;
  margin: 50px 0 0 50px;
}
.box {
  width: 300px; height: 300px;
  background: #000;
  transform: translateX(-100%);
  -webkit-transition: all 300ms ease-in-out 0s;-moz-transition: all 300ms ease-in-out 0s;-o-transition: all 300ms ease-in-out 0s;
}
.box.active {
  transform: translateX(0);
}

let button = document.querySelector(".button");
let buttonHide = document.querySelector(".buttonHide");
let box = document.querySelector(".box");

button.addEventListener("click", function() {
  box.classList.toggle("active");
});

buttonHide.addEventListener("click", function() {
  box.classList.remove("active");
});