Code tạo hiệu ứng Gọi điện & Liên hệ Zalo rung lắc đẹp mắt – Dễ tuỳ biến theo sở thích

Đoạn code bên dưới chỉ đơn giản là HTML và CSS, là đoạn code tạo hiệu ứng gọi điện, hiệu ứng rung lắc cho nút gọi điện trên website. Thêm đoạn mã này vào website của bạn sẽ bắt mắt người dùng hơn và kích thích khách hàng tương tác để tăng chuyển đổi hơn.

Đầu tiên là bạn sẽ chèn đoạn code này vào phần Footer của website

<a href="tel:xxx" title="Hotline" class="lamphuc_cta">
    <img width="32" height="32" src="https://mlqpgeprszak.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://lamphuc.com/wp-content/uploads/2025/03/call.png" alt="" loading="lazy">
</a>

<a href="tel:xxx" title="Hotline" class="lamphuc_cta">
    <img width="32" height="32" src="https://mlqpgeprszak.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://lamphuc.com/wp-content/uploads/2025/03/zalo.png" alt="" loading="lazy">
</a>

Tiếp đến là bạn sẽ chèn thêm đoạn mã CSS này để tạo hiệu ứng

a.lamphuc_cta {
        display: block;
        background: #1cb2ed;
        position: fixed;
        right: 35px;
        top: 50%;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        padding: 15px;
        z-index: 9999;
        -webkit-animation: devvn_zoom 1.5s infinite linear;
        -moz-animation: devvn_zoom 1.5s infinite linear;
        -o-animation: devvn_zoom 1.5s infinite linear;
        animation: devvn_zoom 1.5s infinite linear;
        box-shadow: 0 0 0 0 #1cb2ed;
    }
 
    a.lamphuc_cta img {
        width: 32px;
        height: 32px;
        -webkit-animation: calltrap_spin 3s infinite linear;
        -moz-animation: calltrap_spin 3s infinite linear;
        -o-animation: calltrap_spin 3s infinite linear;
        animation: calltrap_spin 3s infinite linear
    }
    @-webkit-keyframes devvn_zoom {
        70% {
            box-shadow: 0 0 0 15px transparent
        }
        100% {
            box-shadow: 0 0 0 0 transparent
        }
    }
 
    @keyframes devvn_zoom {
        70% {
            box-shadow: 0 0 0 15px transparent
        }
        100% {
            box-shadow: 0 0 0 0 transparent
        }
    }
 
    @-webkit-keyframes calltrap_spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        30% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        33% {
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        36% {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        39% {
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        42% {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        45% {
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        48% {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
            opacity: 1
        }
        51% {
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        54% {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        57% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }
    }
 
    @-moz-keyframes calltrap_spin {
        0% {
            -moz-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        30% {
            -moz-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        33% {
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        36% {
            -moz-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        39% {
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        42% {
            -moz-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        45% {
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        48% {
            -moz-transform: rotate(10deg);
            transform: rotate(10deg);
            opacity: 1
        }
        51% {
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        54% {
            -moz-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        57% {
            -moz-transform: rotate(0deg);
            transform: rotate(0deg)
        }
    }
 
    @-o-keyframes calltrap_spin {
        0% {
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        30% {
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        33% {
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        36% {
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        39% {
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        42% {
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        45% {
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        48% {
            -o-transform: rotate(10deg);
            transform: rotate(10deg);
            opacity: 1
        }
        51% {
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        54% {
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        57% {
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
    }
 
    @keyframes calltrap_spin {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        30% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        33% {
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        36% {
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        39% {
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        42% {
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        45% {
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        48% {
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg);
            opacity: 1
        }
        51% {
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        54% {
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        57% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
    }