<div class="cp_arrows">
  <a class="link cp_arrow" href="#">リンクテキスト
  <svg class="arrow_icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
  <g fill="none" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
  <circle class="arrow_icon_circle" cx="16" cy="16" r="15.12"></circle>
  <path d="M22.364 14.55L17 19.914V8h-2v11.914L9.636 14.55l-1.414 1.414L16 23.742l7.778-7.778z"/>
  </g>
  </svg>
  </a>
</div>

.cp_arrows {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp_arrows .link {
  text-decoration: none;
  color: #039be5;
}
.cp_arrows .cp_arrow .arrow_icon {
  position: relative;
  vertical-align: middle;
  transition: transform 0.3s ease;/*hoverで右に5pxスライド*/
}
.cp_arrows .cp_arrow:hover .arrow_icon {
  transform: translateX(5px);/*右に5px移動*/
}
.cp_arrows .cp_arrow .arrow_icon_circle {
  transition: stroke-dashoffset 0.3s ease;/*hoverでstroke-dashoffsetを100から0にする*/
  stroke-dasharray: 100px;/*破線の間隔*/
  stroke-dashoffset: 100px;/*pathが始まる場所*/
}
.cp_arrows .cp_arrow:hover .arrow_icon_circle {
  stroke-dashoffset: 0px;/*pathが始まる場所*/
}
.cp_arrow path {
  fill: #039BE5;
}
.cp_arrow circle {
  stroke:#039BE5;
}