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

Chia sẻ:

11.6.19 | 0 nhận xét | lượt xem

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