Button Ring beautiful Css

 

**** HTML

<a class="phone_backtotop" title="Gọi ngay 0989274727" href="tel:0989274727">

<i class="fa-solid fa-mobile-screen-button"></i>

</a>

**** CSS:

.phone_backtotop {

position: fixed;

z-index: 9999;

/*top: auto !important;*/

top: 5em;

width: 50px;

height: 50px;

line-height: 55px;

font-size: 16px;

font-weight: 400;

text-align: center;

display: inline-block;

color: #fff;

border-radius: 50%;

background: #6baec7;

text-decoration: none;

transition: opacity 0.2s ease-out;

opacity: 1;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

animation: play 1.5s ease infinite;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

}

@keyframes play{

0% {

    transform: rotate(0deg) scale(1) skew(1deg);

}

10% {

    transform: rotate(-25deg) scale(1) skew(1deg);

}

20% {

    transform: rotate(25deg) scale(1) skew(1deg);

    box-shadow: 0 0 0 5px #ff9897, 0 0 0 10px #ff9897;

}

30% {

    transform: rotate(-25deg) scale(1) skew(1deg);

}

40% {

    transform: rotate(25deg) scale(1) skew(1deg);

}

100% {

    transform: rotate(0deg) scale(1) skew(1deg);

}   

}