Bạn vào một trang web và thấy họ có biểu tưởng hình điện thoại rung rung.
Bạn muốn trang web của mình cũng có để thu hút khách hàng.
Sau đây, tôi sẽ hướng dẫn bạn làm điều đó.

Demo: https://thiencntt.com/share/










Cách làm:
Bước 1: Mở giao diện của trang, tùy theo từng mã nguồn mà bạn có cách làm riêng nhé!
Bước 2: Chèn đoạn CSS sau vào trước thẻ </head>

<style>
.thiencntt-alo-phone {
    background-color: transparent;
    cursor: pointer;
    height: 200px;
    position: fixed;
    transition: visibility 0.5s ease 0s;
    visibility: hidden;
    width: 200px;
    z-index: 999 !important;
}
.thiencntt-alo-phone.thiencntt-alo-show {
    visibility: visible;
}
.thiencntt-alo-phone.thiencntt-alo-hover, .thiencntt-alo-phone:hover {
    opacity: 1;
}
.thiencntt-alo-ph-circle {
    animation: 1.2s ease-in-out 0s normal none infinite running thiencntt-alo-circle-anim;
    background-color: transparent;
    border: 2px solid rgba(30, 30, 30, 0.4);
    border-radius: 100%;
    height: 160px;
    left: 20px;
    opacity: 0.1;
    position: absolute;
    top: 20px;
    transform-origin: 50% 50% 0;
    transition: all 0.5s ease 0s;
    width: 160px;
}
.thiencntt-alo-phone.thiencntt-alo-active .thiencntt-alo-ph-circle {
    animation: 1.1s ease-in-out 0s normal none infinite running thiencntt-alo-circle-anim !important;
}
.thiencntt-alo-phone.thiencntt-alo-static .thiencntt-alo-ph-circle {
    animation: 2.2s ease-in-out 0s normal none infinite running thiencntt-alo-circle-anim !important;
}
.thiencntt-alo-phone.thiencntt-alo-hover .thiencntt-alo-ph-circle, .thiencntt-alo-phone:hover .thiencntt-alo-ph-circle {
    border-color: #28cb75;
    opacity: 0.5;
}
.thiencntt-alo-phone.thiencntt-alo-green.thiencntt-alo-hover .thiencntt-alo-ph-circle, .thiencntt-alo-phone.thiencntt-alo-green:hover .thiencntt-alo-ph-circle {
    border-color: #28cb75;
    opacity: 0.5;
}
.thiencntt-alo-phone.thiencntt-alo-green .thiencntt-alo-ph-circle {
    border-color: #f39000;
    opacity: 0.5;
}
.thiencntt-alo-ph-circle-fill {
    animation: 2.3s ease-in-out 0s normal none infinite running thiencntt-alo-circle-fill-anim;
    background-color: #f39000;
    border: 2px solid transparent;
    border-radius: 100%;
    height: 100px;
    left: 50px;
    opacity: 0.1;
    position: absolute;
    top: 50px;
    transform-origin: 50% 50% 0;
    transition: all 0.5s ease 0s;
    width: 100px;
}
.thiencntt-alo-phone .thiencntt-alo-ph-circle-fill:hover {
    background-color: #28cb75;
}
.thiencntt-alo-phone.thiencntt-alo-hover .thiencntt-alo-ph-circle-fill, .thiencntt-alo-phone:hover .thiencntt-alo-ph-circle-fill {
    background-color: #28cb75;
    opacity: 0.75 !important;
}
.thiencntt-alo-phone.thiencntt-alo-green.thiencntt-alo-hover .thiencntt-alo-ph-circle-fill, .thiencntt-alo-phone.thiencntt-alo-green:hover .thiencntt-alo-ph-circle-fill {
    background-color: #28cb75;
    opacity: 0.75 !important;
}
.thiencntt-alo-phone.thiencntt-alo-green .thiencntt-alo-ph-circle-fill {
    background-color: #f39000;
    opacity: 0.75 !important;
}

.thiencntt-alo-ph-img-circle {
    animation: 1s ease-in-out 0s normal none infinite running thiencntt-alo-circle-img-anim;
    border: 2px solid transparent;
    border-radius: 100%;
    height: 60px;
    left: 70px;
    opacity: 0.7;
    position: absolute;
    top: 70px;
    transform-origin: 50% 50% 0;
    width: 60px;
}

.thiencntt-alo-phone.thiencntt-alo-hover .thiencntt-alo-ph-img-circle, .thiencntt-alo-phone:hover .thiencntt-alo-ph-img-circle {
    background-color: #28cb75;
}
.thiencntt-alo-phone.thiencntt-alo-green.thiencntt-alo-hover .thiencntt-alo-ph-img-circle, .thiencntt-alo-phone.thiencntt-alo-green:hover .thiencntt-alo-ph-img-circle {
    background-color: #28cb75;
}
.thiencntt-alo-phone.thiencntt-alo-green .thiencntt-alo-ph-img-circle {
    background-color: #f39000;
}
@keyframes thiencntt-alo-circle-anim {
0% {
    opacity: 0.1;
    transform: rotate(0deg) scale(0.5) skew(1deg);
}
30% {
    opacity: 0.5;
    transform: rotate(0deg) scale(0.7) skew(1deg);
}
100% {
    opacity: 0.6;
    transform: rotate(0deg) scale(1) skew(1deg);
}
}

@keyframes thiencntt-alo-circle-img-anim {
0% {
    transform: rotate(0deg) scale(1) skew(1deg);
}
10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
}
20% {
    transform: rotate(25deg) scale(1) skew(1deg);
}
30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
}
40% {
    transform: rotate(25deg) scale(1) skew(1deg);
}
50% {
    transform: rotate(0deg) scale(1) skew(1deg);
}
100% {
    transform: rotate(0deg) scale(1) skew(1deg);
}
}
@keyframes thiencntt-alo-circle-fill-anim {
0% {
    opacity: 0.2;
    transform: rotate(0deg) scale(0.7) skew(1deg);
}
50% {
    opacity: 0.2;
    transform: rotate(0deg) scale(1) skew(1deg);
}
100% {
    opacity: 0.2;
    transform: rotate(0deg) scale(0.7) skew(1deg);
}
}
.thiencntt-alo-ph-img-circle a img {
    padding: 4px 0 0 3px;
}
</style>

Bước 3: Chèn đoạn HTML sau vào trước thẻ </body>

<div style="left: -20px; bottom: 77px;" id="thiencntt-alo-phoneIcon" class="thiencntt-alo-phone thiencntt-alo-green thiencntt-alo-show" >
    <div class="thiencntt-alo-ph-circle"></div>
    <div class="thiencntt-alo-ph-circle-fill"></div>
    <div class="thiencntt-alo-ph-img-circle"><a href="tel:0985554994"><img alt="img" src="dаta:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAM1BMVEVMaXH////////////////////////////////////////////////////////////////x7/yuAAAAEHRSTlMAECAwQFBgcH+Pn6+/z9/vBVGEbAAAANxJREFUeNrtlFEOhCAMRKmgIqCd+592N5u6mJBo53ez7/8Fppk2/DAxpUQJi+LNwhj4sPuNGUb0GqIwilcpOFFxPoLOwmSnBpBxYXYpDRcarxz0xzS6lLUbVZyFhKFz8KI2YHuCyJ+Dn3ydLxdmIhwlemxsRI+NCfwAGp8mmlKDn0KsmCFK1dK6ybem8o7o4GRt937C6Vie8pxt7XvTh6iL8wRuIs23qRUnqvhypBtFdnScN9S+M/CUZ0RdNTB8uxfHQOm5bwqwd1qygj6hkg8TWgpuUq5tW6fwx3gBQ34djlG/yuIAAAAASUVORK5CYII="></a></div>
</div>

Nếu bạn muốn thay đổi màu của biểu tượng thì bạn có thể chỉnh trong phần CSS.
Xong