Nút liên hệ nhiều tùy chọn

11.6.19 | 0 nhận xét | lượt xem
Nội Dung Chính [Ẩn] [Hiển thị]
    Bài viết này hướng dẫn bạn thêm nút liên hệ tích hợp 3 tính năng: Nhắn tin Facebook, gửi email và gọi điện. Những icon trong tiện ích này không sử dụng hình ảnh nên không ảnh hưởng đến tốc độ tải trang blog/webstie nha
    Demo ngay tại bài viết này

    HTML

    <div class='lh-hdc'>
        <div class='inbox'>
            <a>
                <span><svg viewBox="0 0 448 512"><path fill="currentColor" d="M224 32C15.9 32-77.5 278 84.6 400.6V480l75.7-42c142.2 39.8 285.4-59.9 285.4-198.7C445.8 124.8 346.5 32 224 32zm23.4 278.1L190 250.5 79.6 311.6l121.1-128.5 57.4 59.6 110.4-61.1-121.1 128.5z"></path></svg></span>
                <span><svg viewBox="0 0 512 512"><path fill="currentColor" d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z"></path></svg></span>
                <span><svg viewBox="0 0 512 512"><path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg></span>
            </a>
            <ul>
                <li><a href="https://m.me/huycovip" target="_blank"><span class='inboxhdc facebook-messenger'><svg class='smallicon' viewBox="0 0 448 512"><path fill="currentColor" d="M224 32C15.9 32-77.5 278 84.6 400.6V480l75.7-42c142.2 39.8 285.4-59.9 285.4-198.7C445.8 124.8 346.5 32 224 32zm23.4 278.1L190 250.5 79.6 311.6l121.1-128.5 57.4 59.6 110.4-61.1-121.1 128.5z"></path></svg></span><p>Messenger</p></a>
                </li>
                <li><a href="huycoivip.volam@gmail.com" target="_blank"><span class='inboxhdc email'><svg class='smallicon' viewBox="0 0 512 512"><path fill="currentColor" d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z"></path></svg></span><p>Gửi Email</p></a>
                </li>
                <li><a href="tel:0905999333" target="_blank"><span class='inboxhdc call'><svg class='smallicon' viewBox="0 0 512 512"><path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg></span><p>0905.999.333</p></a>
                </li>
            </ul>
        </div>
    </div>
    

    CSS

    <style>
    .lh-hdc{position:fixed;bottom:20px;right:20px}
    .inboxhdc{width:20px;height:20px;border-radius:50%;margin-right:10px;color:#fff;text-align:center;vertical-align:middle;float:left}
    .inbox li p{text-align:left;color:#333}
    .inbox{height:40px;width:40px;background:#005b53;overflow:hidden;border-radius:50%;text-align:center;cursor:pointer}
    .inbox:hover ul{display:block}
    .inbox ul{display:none;position:absolute;bottom:20px;right:20px;z-index:100;box-shadow:0 0 8px #a1a1a1;border-radius:5px;background:#fff;padding:0 10px;width:120px}
    .inbox span{display:block!important}
    .inbox svg{height:30px;margin-top:5px;color:#eee}
    .smallicon{height:13px!important;margin-top:3px!important}
    .facebook-messenger{background-color:#0084ff}
    .email{background-color:#ff643a}
    .call{background-color:#4eb625}
    </style>
    

    SCRIPT

    <script>
    var $ul = $('#inbox'),
        roll = function() {
            $ul.find('span').first().fadeOut('slow', function() {
                $(this).appendTo($(this).parent()).fadeIn('slow');
            });
        }, anim = setInterval(roll, 3000);
    
    // Pause on hover...
    $ul.hover(function() {
        clearInterval(anim);
    }, function() {
        anim = setInterval(roll, 3000);
    });
    </script>
    
    Xóa đoạn chữ màu tím đi nếu muốn khi rê chuột vào nút các icon vẫn thay đổi nhau
    Bạn đang xem bài viết "Nút liên hệ nhiều tùy chọn" tại chuyên mục: HTML , Javascript

      Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh

      Chèn code: [pre]Code đã mã hóa [/pre]

      Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

      Chèn link: Click để chèn link