Hướng dẫn tạo button rung lắc bằng CSS nhằm tăng tương tác

[Tuan_H]

Chèn đoạn mã css vào theme bạn đang sử dụng:

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}
.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}
.button {
    transition: all 150ms linear 0s;
    animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

Nếu bạn đang dùng theme Flatsome, mặc định các button sẽ đều rung lắc, còn nếu bạn đang sử dụng theme khác hãy thêm class=“button” vào vị trí mong muốn.

Chúc bạn thành công