<div class="wrapper">
  <div class="item">
    <button>R 
  <i class="fa fa-long-arrow-right arrow1" aria-hidden="true"></i>
</button>
  </div>

  <div class="item">
    <button>BR 
  <i class="fa fa-long-arrow-right arrow2" aria-hidden="true"></i>
</button>
  </div>
  
  <div class="item">
    <button>90 
  <i class="fa fa-long-arrow-right arrow3" aria-hidden="true"></i>
</button>
  </div>  <div class="item">
    <button>360 
  <i class="fa fa-long-arrow-right arrow4" aria-hidden="true"></i>
</button>
  </div>
  
  
</div>
body {
  font-family: "Lato";
  background: #0c36fb;
}

.wrapper {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.item {
  width: 100px;
  height: 50px;
  margin: 10px;
  position: relative;
}

button {
  border: 1px solid white;
  background: white;
  width: 100%;
  padding: 15px;
  border-radius: 3px;
  color: blue;
  transition: background 0.5s ease;
}

button:hover {
  background: blue;
  color: white;
  font-weight: normal;
}

button:hover i {
  color: white;
}

i {
  color: blue;
  margin-left: 20px;
}

.arrow1 {
  animation: slide1 1s ease-in-out infinite;
  margin-left: 9px;
}

.arrow2 {
  animation: slide2 1s ease-in-out infinite;
}

.arrow3 {
  transform-origin: 0% 50%;
  animation: slide3 1s ease-in-out infinite;
}

.arrow4 {
  transform-origin: 0% 50%;
  animation: slide4 4s linear infinite;
}

@keyframes slide1 {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(10px, 0);
  }
}

@keyframes slide2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(45deg);
  }

  50% {
    transform: translate(10px, 10px) rotate(45deg);
  }
}

@keyframes slide3 {
  0%,
  100% {
    transform: rotate(-45deg);
  }

  50% {
    transform: rotate(45deg);
  }
}

@keyframes slide4 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css

External JavaScript

This Pen doesn't use any external JavaScript resources.