<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);
}
}
This Pen doesn't use any external JavaScript resources.