<div class="arrow-wrapper">
<svg width="40" height="40" viewBox="0 0 40 40" preserveAspectRatio="xMidYMid meet"><g fill="#F74802" fill-rule="evenodd"><path d="M6 18.5h26v3H6z"></path><path fill-rule="nonzero" d="M24.178 9.121l10.935 10.935-10.935 10.935-2.122-2.12 8.814-8.815-8.814-8.813z"></path></g></svg>
</div>

@keyframes move_arrow { 
   0% { left: 50%; }
  33% { left: 130%}
  34% {left: 131%; visibility:hidden;}
  66% { left: -130%; visibility:hidden;}
  67% {left: -131%; visibility:visible;}
  100% { left: 50% }
}
  
@mixin transition($property) {
  transition: $property .1s ease;
 }


body {
  background-color: #deedee;
}

.arrow-wrapper{
  border: 1px solid #F74802;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  @include transition(border-color);
}

.arrow-wrapper:hover{ 
    border: 1px solid pink;
}


svg {
  position: absolute;
  visibility: visible;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 75%;
  transform: translate(-50%, -50%);
}

.arrow-wrapper:hover svg{ 
    animation: .6s linear 0s 1 forwards move_arrow ;
}
.arrow-wrapper svg g{  
  @include transition(fill);
}

.arrow-wrapper:hover svg g{  
      fill: pink
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.