Có một số bạn muốn tìm kiếm nút liên hệ đẹp, nhưng không muốn cài plugin hay tốn thời gian làm html css, sau đây mình gửi bạn code liên hệ đẹp (thực ra thì cái này mình lấy từ plugin wp helper lite). Cho nên mình vẫn sẽ để nguyên các thẻ class gốc. Bạn nào muốn sửa thì lấy về rồi sửa sau nhé.
<div id="mb-whp-contact" class="whp-contact mbwp-ct-right">
<!-- Kênh liên hệ khác -->
<div class="whp-contact-item" id="mb-whp-other">
<div class="whp-contact-content">
<div class="whp-contact-content-head">
Kênh liên hệ khác
</div>
<div class="whp-contact-content-body">
<a target="_blank" class="whp-contact-content-item" href="https://zalo.me/0989265759/">
<img src="https://phaohoavietnam.net/wp-content/uploads/2024/03/zalo-icon.png" alt="Icon Facebook" class="whp-content-item-icon">
<span>Zalo</span>
</a>
<a target="_blank" class="whp-contact-content-item" href="https://m.me/439123762620450/">
<img src="https://phaohoavietnam.net/wp-content/uploads/2024/10/messenger.png" alt="Icon Messenger" class="whp-content-item-icon">
<span>Messenger</span>
</a>
</div>
</div>
<div class="whp-contact-button">
<div class="whp-contact-icon">
<!-- Icon mặc định (Tin nhắn cho các kênh liên hệ khác) -->
<svg class="default-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"></path>
</svg>
<!-- Icon X -->
<svg class="close-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
</div>
</div>
<!-- Zalo -->
<div class="whp-contact-item" id="mb-whp-zalo">
<div class="whp-contact-content">
<div class="whp-contact-content-head">
Liên hệ qua Zalo
</div>
<div class="whp-contact-content-body">
<a target="_blank" class="whp-contact-content-item" href="https://zalo.me/0989265759">
<img src="https://phaohoavietnam.net/wp-content/uploads/2024/03/zalo-icon.png" alt="Icon Zalo" class="whp-content-item-icon">
<span>Zalo</span>
</a>
</div>
</div>
</div>
<!-- Gọi điện -->
<div class="whp-contact-item" id="mb-whp-phone">
<div class="whp-contact-content">
<div class="whp-contact-content-head">
Gọi ngay cho chúng tôi!
</div>
<div class="whp-contact-content-body">
<a href="tel:+84989265759" class="whp-contact-content-item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="whp-content-item-icon w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"></path>
</svg>
<span>+84989 265 759</span>
</a>
</div>
</div>
<div class="whp-contact-button">
<div class="whp-contact-icon">
<!-- Icon mặc định (Gọi điện) -->
<svg class="default-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"></path>
</svg>
<!-- Icon X -->
<svg class="close-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('.whp-contact-button').forEach(button => {
button.addEventListener('click', function (event) {
event.stopPropagation(); // Ngăn chặn sự kiện lan truyền để không đóng nội dung ngay khi click vào nút
// Tìm các thành phần cần thao tác
const contactContent = this.previousElementSibling;
const contactIcon = this.querySelector('.whp-contact-icon');
// Kiểm tra trạng thái của phần tử
const isActive = contactContent.classList.contains('active');
// Đóng tất cả các phần tử trước khi mở phần tử mới
document.querySelectorAll('.whp-contact-content.active').forEach(content => {
content.classList.remove('active');
content.classList.add('inactive');
setTimeout(() => {
content.classList.remove('inactive');
}, 500); // Thời gian phù hợp với `transition` trong CSS
});
document.querySelectorAll('.whp-contact-icon.active').forEach(icon => {
icon.classList.remove('active');
});
// Nếu phần tử hiện tại chưa active, mở nó
if (!isActive) {
contactContent.classList.add('active');
contactIcon.classList.add('active');
}
});
});
// Đóng tất cả các phần tử khi nhấp ra ngoài
document.addEventListener('click', function () {
document.querySelectorAll('.whp-contact-content.active').forEach(content => {
content.classList.remove('active');
content.classList.add('inactive');
setTimeout(() => {
content.classList.remove('inactive');
}, 500); // Thời gian phù hợp với `transition` trong CSS
});
document.querySelectorAll('.whp-contact-icon.active').forEach(icon => {
icon.classList.remove('active');
});
});
</script>
Mã CSS
#mb-whp-contact {
position: fixed;
bottom: 30px;
right: 20px;
-webkit-animation: zoomInDown 1.5s;
animation: zoomInDown 1.5s;
z-index: 9999;
}
.whp-contact-item {
position: relative;
}
.whp-contact-icon {
background: #dd3333;
color: #fff;
border-radius: 100%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
.whp-contact-icon svg {
width: 30px;
height: 30px;
transition: opacity 0.3s ease;
}
.whp-contact-icon .default-icon {
opacity: 1;
}
.whp-contact-icon .close-icon {
opacity: 0;
position: absolute;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.whp-contact-icon:before,
.whp-contact-icon:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #dd3333;
opacity: 0.5;
z-index: -1;
left: -15px;
top: -14px;
border-radius: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-animation: mbwph-pulse 2s infinite;
animation: mbwph-pulse 2s infinite;
}
.whp-contact-icon:after {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.whp-contact-icon.active .default-icon {
opacity: 0;
}
.whp-contact-icon.active .close-icon {
opacity: 1;
transform: rotate(90deg);
}
.whp-contact-content {
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
position: absolute;
bottom: 140%;
min-width: 320px;
border-radius: 5px;
box-sizing: border-box;
transition: opacity 0.5s ease, transform 0.5s ease;
transform: translateY(20px);
right: 0;
pointer-events: none;
}
.whp-contact-content.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: all;
}
/* Hiệu ứng biến mất */
.whp-contact-content.inactive {
opacity: 0;
transform: translateY(20px);
visibility: hidden;
pointer-events: none;
}
.whp-contact-content-head {
background: #dd3333;
color: #fff;
padding: 10px;
border-radius: 5px 5px 0 0;
}
.whp-contact-content-body > * {
padding: 10px 15px;
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
transition: background-color 0.3s ease;
}
.whp-contact-content-body > *:hover {
background: #eee;
}
.whp-content-item-icon {
width: 35px;
height: 35px;
object-fit: contain;
margin-right: 15px;
}
.whp-contact-icon-close {
opacity: 0;
visibility: hidden;
transition: 0.4s;
display: flex;
position: absolute;
top: -10px;
right: -10px;
background: #dd3333;
color: #fff;
width: 20px;
height: 20px;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
}
.whp-contact-content.active .whp-contact-icon-close {
opacity: 1;
visibility: visible;
}
div#mb-whp-contact > *:not(:last-child) {
margin-bottom: 20px;
}
@keyframes mbwph-pulse {
0% {
transform: scale(0);
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@-webkit-keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -500px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -500px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInDown {
0% {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -500px, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
Bài viết này hữu ích với bạn chứ?
Có hữu íchKhông, quá tệ :(
