Trên các website bán hàng hoặc dịch vụ (đặc biệt là lĩnh vực bất động sản, spa, sửa chữa, hosting…), việc hiển thị nút gọi điện nổi bật giúp khách hàng liên hệ nhanh hơn, tăng tỉ lệ chuyển đổi khách hàng tiềm năng (conversion) đáng kể.
Một nút “Gọi ngay” rung lắc nhẹ ở góc màn hình sẽ thu hút sự chú ý mà không gây khó chịu – đây là một thủ thuật UX đơn giản mà hiệu quả cao.
1. Cách tạo nút gọi điện rung lắc bằng HTML & CSS
* Cách 1: Sử dụng code tay để tạo nút gọi điện rung lắc cho Website
Bước 1: Chèn mã HTML vào website
Thêm đoạn mã sau vào footer.php (hoặc trong phần “HTML tùy chỉnh” nếu dùng Elementor / UX Builder):
<a href=”tel:0123456789″ class=”call-button” title=”Gọi ngay!”> <div class=”call-icon”> <i class=”fa fa-phone”></i> </div> </a>
🔧 Thay 0123456789 bằng số điện thoại của bạn.
Bước 2: Thêm CSS tạo hiệu ứng rung lắc
Thêm đoạn CSS sau vào Appearance >> Customize >> Additional CSS:
.call-button { position: fixed; bottom: 20px; right: 20px; background-color: #28a745; color: #fff; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); animation: pulse 2s infinite; z-index: 9999; } .call-button i { font-size: 26px; } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); } 70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(40, 167, 69, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } }
Bạn xem đã ok chưa nếu chưa hoặc muốn tạo hiệu ứng rung lắc mạnh hơn (vibrate animation) ta có thể thay hiệu ứng pluse bằng shake như sau:
@keyframes shake { 0%, 100% { transform: rotate(0deg); } 10%, 30%, 50%, 70%, 90% { transform: rotate(10deg); } 20%, 40%, 60%, 80% { transform: rotate(-10deg); } } .call-button { animation: shake 2s infinite; }
👉 Nút sẽ rung nhẹ lắc qua lại, giống như điện thoại đang “rung chuông”.
– Dùng icon khác thay điện thoại:
Nếu muốn đổi biểu tượng, có thể dùng thư viện Font Awesome:
<i class=”fa fa-phone”></i> <!– Điện thoại –> <i class=”fa fa-headset”></i> <!– Hỗ trợ –> <i class=”fa fa-comments”></i> <!– Chat –> <i class=”fa fa-whatsapp”></i> <!– WhatsApp –>
* Cách 2: Dùng plugin để tạo nút gọi điện rung lắc cho Website
– Về Plugin chúng ta có thể thử một số plugin như:
- WP Call Button (miễn phí – nhẹ, có hiệu ứng rung)
- RingMe Button
- Call Button for Mobile (cài và chọn màu, vị trí, hiệu ứng dễ dàng)
2. Cuối cùng:
Trên đây là bài viết của mình – chỉ với vài dòng HTML & CSS đơn giản hoặc sử dụng plugin có sẵn, bạn đã có thể tạo một nút “Gọi ngay” rung lắc nổi bật, thân thiện với người dùng và mang lại hiệu quả chuyển đổi rõ rệt. Đây là một thủ thuật UX nhỏ nhưng có tác động lớn, đặc biệt phù hợp với các website cần tư vấn nhanh như bất động sản, spa, dịch vụ sửa chữa hay hosting.
Chúc các bạn thành công.
