<div class="container">
<div class="callback__button">CALL NOW</div>
</div>
.container {
text-align:center;
}
.callback__button {
display: inline-flex;
border: 5px solid #ffffff;
background-color: #0368ea;
padding: 11px 67px;
font-weight: 700;
color: #ffffff;
position:relative;
}
.callback__button:before {content:'';position: absolute;width: 58px;height: 36px;background: url(https://i.ibb.co/HPM00FD/arrow.png) no-repeat center center;left: -93px;top: 5px;
animation: spin 2s infinite linear;
}
.callback__button:after {content:'';position: absolute;width: 58px;height: 36px;background: url(https://i.ibb.co/HPM00FD/arrow.png) no-repeat center center;right: -93px;top: 5px;
animation: spin 2s infinite linear;
}
.callback__button:hover{
cursor: pointer;
}
@keyframes spin {
0%, 100% {
transform: rotate(180deg) translateX(0, 0);
}
50% {
transform: rotate(180deg) translateX(0,100%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.