Hiệu ứng Rung Lắc Tuyệt đẹp Cho Nút Gọi điện - WordPress Developer

• Trang chủ
• Blog
• Sản phẩm
  • Dự án web
  • Plugins
• WordPress
  • Widgets
  • Woocommerce
  • Plugins
• Mẹo – Thủ Thuật
  • PHP
  • HTML&CSS
  • Get YouTube Video Thumbnail Image
  • Auto Get Latitude and Longitude
• Liên hệ

Trang chủ / Blog / HTML&CSS / Hiệu ứng rung lắc tuyệt đẹp cho nút gọi điện

Đ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 DevVN Reviews for Woocommerce Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK for Woocommerce Plugin Kết nối Zalo OA với WordPress

4.6/5 - (10 votes) Từ khóa: Call button animation Bài viết có ích cho bạn? Hãy chia sẻ ngay: Bài viết cùng chuyên mục

• Chia sẻ cách chèn video youtube tự động chạy vào website
• Chia sẻ nút liên hệ tuyệt đẹp và gọn gàng
• Làm đẹp cho nút xóa sản phẩm trong woocommerce
• Ví dụ thực tế về CSS3 transform
• Placeholder textbox kiểu đánh máy – jQuery placeholderTypewriter

• Bình luận

Tìm kiếm Ví dụ: Customizer, Woocommerce, Flickr Widget, WP_Query ... Hosting khuyên dùng cho WordPress

	Hosting WordPress chất lượng cao. Support tốt. Dùng thử 7 ngày. Xem ngay
	Một trong Hosting WordPress mà mình khuyên dùng ở VN. Xem ngay
	Hosting WordPress chất lượng cao. Support tốt. Dùng thử 7 ngày. Click để mã 40% ngay Nhận mã
	VPS nước ngoài chất lượng cao cho WordPress. Có đủ location cho bạn chọn. Xem ngay

Bài Viết Ngẫu Nhiên

• Tạo trang đăng nhập hoàn toàn mới cho wordpress
• [Plugin] DevVN Local Store – Find a local store
• Chia sẻ cách chèn video youtube tự động chạy vào website
• Hướng dẫn thu gọn nội dung chi tiết sản phẩm và mô tả danh mục cho Flatsome
• Tìm Max, Min, UCLN của 2 số nguyên bằng visual basic

Lê Văn Toản

VPS Chất lượng nên dùng

Plugin Reviews tuyệt đẹp cho Woo

Sản phẩm nổi bật của Toản DevVN Reviews for Woocommerce Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy Plugin Kết nối Zalo OA với WordPress DevVN Menu Order – Plugin đặt đồ ăn nhanh, đồ uống online cho WordPress và Woocommerce Plugin tính phí vận chuyển cho quận/huyện trong woocommerce Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK for Woocommerce x

• Hotline
• Chat Zalo
• Chat Facebook