<div class="box">
  <a href="#" class="button-area">
    <div class="button">
      <span class="arrow">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" width="40" height="40" color="#D99D9A"><defs><style>.cls-63ce7424ea57ea6c8380058e-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><line class="cls-63ce7424ea57ea6c8380058e-1" x1="21.5" y1="12" x2="0.5" y2="12"></line><polyline class="cls-63ce7424ea57ea6c8380058e-1" points="13.86 4.36 21.5 12 13.86 19.64"></polyline></svg>
      </span>
<span class="arrow-hide">
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" width="40" height="40" color="#D99D9A"><defs><style>.cls-63ce7424ea57ea6c8380058e-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}</style></defs><line class="cls-63ce7424ea57ea6c8380058e-1" x1="21.5" y1="12" x2="0.5" y2="12"></line><polyline class="cls-63ce7424ea57ea6c8380058e-1" points="13.86 4.36 21.5 12 13.86 19.64"></polyline></svg>
        </span>
    </div>
  </a>
</div>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
  background: #f4f4f4;
  margin: 0 auto;
}
.button-area {
  display: inline-block;
}
.button {
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 72px;
  background: #334360;
  border-radius: 50%;
  overflow: hidden;
  transition: .5s;
}
.button-area:hover .button {
  background: #465A77;
}
.arrow {
  transform: translateX(20px);
  transition: .5s;
}

 .button-area:hover .arrow
{
  transition: .5s;
  transform: translateX(120px);
}

 .button-area:hover .arrow-hide {
  transition: .5s;
  transform: translateX(-20px);
}

.arrow-hide {
  transform: translateX(-120px);
  transition: .5s;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.