Đoạn code sau đơn giản chỉ là HTML và CSS để tạo hiệu ứng rung lắc cho nút gọi điện trên website. Thêm hiệu ứng vào sẽ bắt mắt người dùng hơn và click thích người ta gọi điện hơn 🙂
Chèn code sau xuống footer của website
<a href="tel:xxx" title="Hotline" class="devvn_animation_zoom">
<img width="32" height="32" src="https://levantoan.com/wp-content/uploads/2017/10/phone-call.png" alt="" loading="lazy">
</a>
Sau đó chèn thêm đoạn Css này
Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.
Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino hosting
- iNet
- Nước ngoài thì Vultr
a.devvn_animation_zoom {
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.devvn_animation_zoom 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)
}
}
Hình ảnh kèm theo
Chúc các bạn có 1 nút gọi điện kèm hiệu ứng tuyệt vời cho website
Kho plugin của tôi
Từ khóa: Call button animation
- Bình luận
