<div class="contact-buttons">
<a href="https://zalo.me/Thay số zalo của bạn" target="_blank" class="zalo-button">
<img src="https://haiauint.vn/wp-content/uploads/2024/02/zalo-icon.png" alt="Zalo">
</a>
<a href="tel:Thay sđt của bạn" class="phone-button">
<img src="https://cdn-icons-png.flaticon.com/512/724/724664.png" alt="Phone">
</a>
<a href="https://m.me/Thay id fb của bạn" target="_blank" class="messenger-button">
<img src=https://cdn.iconscout.com/icon/free/png-256/free-facebook-76-189800.png" alt="Messenger">
</a>
</div>
<style>.contact-buttons {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-buttons a {
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
animation: shake 0.5s ease-in-out 1, glow 2s infinite alternate;
animation-delay: 0.5s; /* Hiệu ứng rung chuyển bắt đầu sau 0.5 giây */
transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.contact-buttons a img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s;
}
/* Hiệu ứng nổi bật khi rê chuột */
.contact-buttons a:hover {
transform: scale(1.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
background-color: #f0f0f0;
}
.contact-buttons a:hover img {
opacity: 0.8;
}
/* Hiệu ứng rung chuyển ban đầu */
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-10px); }
40%, 80% { transform: translateX(10px); }
}
/* Hiệu ứng phát sáng dần đều xung quanh nút */
@keyframes glow {
0% {
box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}
100% {
box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}
}
@media (max-width: 768px) {
.contact-buttons {
bottom: 10px;
right: 10px;
}
.contact-buttons a {
width: 40px;
height: 40px;
}
}
</style>
