<div class="cp_arrows">
  <div class="cp_round">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </div>
</div>

.cp_arrows {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp_arrows .cp_round {/*外側の丸*/
  position: relative;
  width: 100px;
  height: 100px;
  border: 3px solid #42a5f5;
  border-radius: 100%;
  cursor: pointer;
}
/*矢印の設定*/
.cp_arrows span {/*基本設定（矢印線1つのみを基準にする）*/
  position: absolute;
  display: block;
  width: 35px;/*矢印線の長さ*/
  height: 5px;/*矢印線の太さ*/
  background: #42a5f5;/*矢印線の色*/
  border-radius: 3px;
  transition: 0.4s ease-in;
  z-index: 999;
}
.cp_arrows span:first-child {/*1つ目の矢印線の位置と角度（左下の矢印線）*/
  bottom: 30%;
  left: 18%;
  transform: rotate(30deg);
}
.cp_arrows span:nth-child(2) {/*2つ目の矢印線の位置と角度（右下の矢印線）*/
  bottom: 30%;
  left: 47%;
  transform: rotate(-30deg);
}
.cp_arrows span:nth-child(3) {/*3つ目の矢印線の位置と角度（左上の矢印線）*/
  bottom: 55%;
  left: 18%;
  transform: rotate(30deg);
}
.cp_arrows span:nth-child(4) {/*4つ目の矢印線の位置と角度（右上の矢印線）*/
  bottom: 55%;
  left: 47%;
  transform: rotate(-30deg);
}
/*矢印hover時の設定*/
.cp_arrows .cp_round:hover span:nth-child(1) {/*1つ目の矢印線の角度（左下の矢印線）*/
  transform: rotate(-155deg);
}
.cp_arrows .cp_round:hover span:nth-child(2) {/*2つ目の矢印線の角度（右下の矢印線）*/
  transform: rotate(155deg);
}
.cp_arrows .cp_round:hover span:nth-child(3) {/*3つ目の矢印線の角度（左上の矢印線）*/
  transform: rotate(205deg);
}
.cp_arrows .cp_round:hover span:nth-child(4) {/*4つ目の矢印線の角度（右上の矢印線）*/
  transform: rotate(-205deg);
}