<div class="cp_arrows">
<div class="cp_round">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_arrows {
position: relative;
display: flex;
height: 300px;
margin: 2em auto;
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 {
position: absolute;
z-index: 999;
display: block;
width: 35px;
height: 5px;
-webkit-transition: 0.4s ease-in;
transition: 0.4s ease-in;
border-radius: 3px;
background: #42a5f5;
}
.cp_arrows span:first-child {
bottom: 30%;
left: 18%;
transform: rotate(30deg);
}
.cp_arrows span:nth-child(2) {
bottom: 30%;
left: 47%;
transform: rotate(-30deg);
}
.cp_arrows span:nth-child(3) {
bottom: 55%;
left: 18%;
transform: rotate(30deg);
}
.cp_arrows span:nth-child(4) {
bottom: 55%;
left: 47%;
transform: rotate(-30deg);
}
.cp_arrows .cp_round:hover span:nth-child(1) {
transform: rotate(-155deg);
}
.cp_arrows .cp_round:hover span:nth-child(2) {
transform: rotate(155deg);
}
.cp_arrows .cp_round:hover span:nth-child(3) {
transform: rotate(205deg);
}
.cp_arrows .cp_round:hover span:nth-child(4) {
transform: rotate(-205deg);
}