Đoạn Code nút liên hệ

 

——–Chèn đoạn mã sau vào Footer.php vào phần trước </body>

Nếu web Flatsome thì bạn vào : Flatsome > advanced > Global setting > Footer Scripts và dán vào đây là được—

<style>
.contact-floating {
position: fixed;
bottom: 20px;
left: 10px;
z-index: 9999;
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
gap: 10px;
}

 

/* Nút “LIÊN HỆ” với icon + rung mạnh */
.contact-toggle {
background-color: #B71715;
color: white;
padding: 12px 20px;
border-radius: 30px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 8px;
border: none;
animation: shake-strong 1.2s infinite;
}

 

.contact-toggle img {
width: 18px;
height: 18px;
}

 

/* Hiệu ứng rung mạnh */
@keyframes shake-strong {
0% { transform: rotate(0deg); }
20% { transform: rotate(10deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(8deg); }
80% { transform: rotate(-8deg); }
100% { transform: rotate(0deg); }
}

 

/* Nút con */
.contact-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background-color: white;
border-radius: 30px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
color: #000;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
}

 

.contact-item img {
width: 24px;
height: 24px;
}

 

.contact-item.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

 

/* Hotline nút đỏ */
.contact-item.hotline {
background-color: #B71715;
color: white;
}

 

.contact-item.hotline:hover {
background-color: #d32f2f;
}

 

/* Responsive */
@media only screen and (max-width: 768px) {
.contact-floating {
bottom: 20px;
left: 10px;
}

 

.contact-item, .contact-toggle {
font-size: 13px;
}
}
.contact-toggle img {
width: 35px;
height: 35px;
}
</style>

 

<div class=”contact-floating”>

<button class=”contact-toggle” onclick=”toggleContactMenu()”>
<img src=”#” alt=”phone”>
LIÊN HỆ
</button>

 

<a href=”https://m.me/#” class=”contact-item” target=”_blank”>
<img src=”#” alt=”Messenger”>
Messenger
</a>

 

<a href=”https://zalo.me/#” class=”contact-item” target=”_blank”>
<img src=”#” alt=”Zalo”>
Zalo
</a>

 

<a href=”tel:#” class=”contact-item hotline”>
<img src=”#” alt=”Hotline 1″>
Hotline 1
</a>

 

<a href=”tel:#” class=”contact-item hotline”>
<img src=”#” alt=”Hotline 2″>
Hotline 2
</a>
</div>

 

<script>
function toggleContactMenu() {
document.querySelectorAll(‘.contact-item’).forEach(item => {
item.classList.toggle(‘show’);
});
}
</script>