Thiết Kế Thanh Social Icon Cho Website: Hướng Dẫn Chi Tiết + 4 Bước Dễ Làm

Giới thiệu

Bạn muốn hiển thị các nút liên hệ Facebook, Zalo hoặc số điện thoại nổi cố định ở góc màn hình, vừa đẹp vừa thu hút người dùng?
Hôm nay mình sẽ chia sẻ cách tạo Float Social Icon với hiệu ứng rung lắc và viền pulse bắt mắt chỉ bằng HTML và CSS.

Bước 1: HTML – Tạo cấu trúc icon

Dưới đây là đoạn HTML hiển thị icon Facebook và Zalo nổi bên trái màn hình:

<div class="social-float">
    <a href="https://facebook.com/" class="social-btn fb" target="_blank">
        <span class="outer-border pulse"></span> <!-- Viền ngoài -->
        <span class="inner-border"></span>       <!-- Viền trong -->
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/facebook.png" alt="Facebook">
    </a>
    <a href="https://zalo.me/" class="social-btn zalo" target="_blank">
        <span class="outer-border pulse"></span>
        <span class="inner-border"></span>
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/zalo.png" alt="Zalo">
    </a>
</div>

📌 Giải thích:

• .social-float là khối chứa tất cả các icon.
• Mỗi .social-btn là một nút, bên trong gồm:
  • outer-border: viền ngoài có hiệu ứng pulse.
  • inner-border: nền màu tròn bên trong.
  • img: ảnh icon Facebook hoặc Zalo.

Bước 2: CSS – Thiết kế & hiệu ứng

.social-float {
    position: fixed;
    bottom: 5%;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-btn {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Icon */
.social-btn img {
    width: 30px;
    height: 30px;
    position: relative;
    z-index: 3;
    animation: shake 0.5s infinite;
}

/* Viền trong */
.inner-border {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    z-index: 2;
}

/* Viền ngoài */
.outer-border {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    z-index: 1;
    animation: pulse 2s infinite;
}

/* Màu riêng cho từng mạng */
.fb .outer-border { background-color: rgba(59, 89, 152, 0.2); }
.zalo .outer-border { background-color: rgba(0, 153, 255, 0.2); }

.fb .inner-border { background-color: #3b5998; }
.zalo .inner-border { background-color: #0099ff; }

/* Hiệu ứng rung icon */
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(12deg); }
    50% { transform: rotate(-12deg); }
    80% { transform: rotate(12deg); }
}

/* Hiệu ứng pulse cho viền ngoài */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

Bước 3: Thêm ảnh icon

• Tải ảnh facebook.png và zalo.png về. (Ảnh được đính kèm đường dẫn)
• Đặt ảnh vào thư mục:

Bước 4: Kết quả

Khi áp dụng xong:

• Icon sẽ cố định ở góc trái, cách đáy 5%.
• Có hiệu ứng pulse ngoài viền và rung lắc nhẹ ở icon.
• Khi click, người dùng sẽ được dẫn thẳng đến link Facebook hoặc Zalo của bạn.

Tùy biến thêm

• Thêm icon Phone, Telegram, Gmail bằng cách copy một khối <a> và đổi ảnh + màu trong CSS.
• Đổi vị trí icon sang bên phải bằng right: 20px; left: auto;.