Cách chèn các icon Số điện thoại, Facebook, Zalo.. vào website

Hôm nay mình xin gửi đến các bạn bộ sưu tập các nút Facebook,Zalo, Số điện thoại để chèn vào website, với nhiều style, các bạn có thể lựa chọn style phù hợp với mình nhé ! Các bạn chỉ cần copy đoạn code và bỏ vào footer.php , và thay đổi lại số điện thoại, zalo,facebook trong thẻ a lại là được. Đối với theme Flatsome (Là các theme mua tại Web Khởi Nghiệp), các bạn chèn vào phần flatsome – Advanced- Global setting – Footer Script nhé . Sau khi chèn xong, các bạn ra trang chủ và nhấn Ctr F5 để load cache lại và trải nghiệm thành quả ! Style 1:

chen icon website

<style>
.div-nut{
	    display: flex;
    flex-direction: column;
	font-size: 14px !important;
    position: fixed;
    z-index: 2147483647;
        bottom: 24px;
    left: 0;
    padding-left: 5px;
}
.div-nut >a{
	    display: inline-block;
	    overflow: visible !important;
	    width: 54px!important;
    height: 54px!important;
    margin: 6px!important;
    background-size: 100%!important;
    border: 2px solid #fff!important;
    border-radius: 50%!important;
	margin: 8px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    cursor: pointer;
    position: relative;
}
.div-nut .nut-action:hover .tooltext {
	    visibility: visible;
    opacity: 1;
}
.div-nut:hover .nut-action{
    text-decoration: none !important;
    box-shadow: 0 5px 10px rgba(0,0,0,.15), 0 4px 15px rgba(0,0,0,.13);
}
.div-nut .tooltext{
	visibility: hidden;
    font-size: 12px !important;
    line-height: 16px !important;
    text-align: center;
    white-space: nowrap;
    border-radius: 4px;
    padding: 8px;
    position: absolute;
    top: calc(50% - 16px);
    z-index: 1;
    opacity: 0;
    transition: opacity .5s;
	    left: 120%;
	    background-image: linear-gradient(180deg, #e57373 0%, #c62828 100%);
    color: #fff;
}
.div-nut .nut-goi{
background-image: url("https://webkhoinghiep.net/wp-content/uploads/2020/10/call.svg");
}
.div-nut .nut-zalo{
	background-image: url("https://webkhoinghiep.net/wp-content/uploads/2020/10/zalo.svg");

}
.div-nut .nut-face{
	background-image: url("https://webkhoinghiep.net/wp-content/uploads/2020/10/messenger.svg");
}
</style>
<div class="div-nut">
	<a href="tel:0935743575" class="nut-goi nut-action">
		<div><span class="tooltext">Gọi ngay</span></div>
	</a>
	<a href="http://zalo.me/0935743575" target="_blank" class="nut-zalo nut-action">
		<div ><span class="tooltext">Chat với chúng tôi qua Zalo</span></div>
	</a>
	<a href="https://m.me/webkhoinghiepnhatrang/" target="_blank" class="nut-face nut-action">
		<div ><span class="tooltext">Facebook Messenger</span></div>
	</a>
</div>

Style 2: Style đơn giản:

style2

<style>.float-contact {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo {
background: #8eb22b;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-face {
background: #125c9e;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.float-contact .hotline {
background: #d11a59!important;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-zalo a, .chat-face a, .hotline a {
font-size: 13px;
color: white;
font-weight: 400;
text-transform: none;
line-height: 0;
}
@media (max-width: 549px){
.float-contact{
display:none
}
}</style>
<div class="float-contact">
<button class="chat-zalo">
<a href="http://zalo.me/0867592210">Chat Zalo</a>
</button>
<button class="chat-face">
<a href="http://m.me/moosun.vn">Chat Facebook</a>
</button>
<button class="hotline">
<a href="tel:0867592210">Hotline: 0867592210</a>
</button>
</div>

Style 3: Email, nút gọi động và Zalo

mau3

<style>
@keyframes pulse {from,to {-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50% {-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}
@-webkit-keyframes zoomIn {from {opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50% {opacity:1}}
@keyframes zoomIn {from {opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50% {opacity:1}}
.cta-lptech {
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 999;
    position: fixed;
    bottom: 36px;
    left: 15px;
    width: 50px;
}
.cta-lptech li {
    width: 50px;
    float: left;
    margin-bottom: 10px;
}
.cta-lptech li a {
    height: 50px;
    line-height: 50px;
    background-color: #ff2a28;
    box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);
}
.cta-lptech li a i {
    font-size: 27px;
    color: #fff;
    padding: 12px;
}
.cta-lptech li a, .cta-lptech li a img {
    width: 50px;
    border-radius: 100%;
}
.cta-lptech li, .cta-lptech li a {
    display: inline-block;
}
.cta-lptech li a.zalo {
    background-color: #0180c7;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.mypage-alo-ph-circle, .mypage-alo-phone:hover .mypage-alo-ph-circle {
    border-color: #ffd53b !important;
}
.mypage-alo-ph-circle-fill, .mypage-alo-ph-img-circle, .mypage-alo-phone:hover .mypage-alo-ph-circle-fill, .mypage-alo-phone:hover .mypage-alo-ph-img-circle {
    background-color: rgba(244,68,56,0.5);
}
.mypage-alo-ph-circle-fill {
    width: 60px;
    height: 60px;
    top: 56px;
    left: -5px;
    position: absolute;
    -ms-transition: all .2s ease-in-out;
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    opacity: .4!important;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}
.mypage-alo-ph-circle {
    width: 80px;
    height: 80px;
    top: 45px;
    left: -16px;
    position: absolute;
    background-color: #774d4d00;
    border-radius: 100%;
    border: 2px solid rgba(30,30,30,.4);
    opacity: .1;
    opacity: .5;
}
</style>


<ul class="cta-lptech"><li><a aria-label="gửi mail cho chúng tôi" href="mailto:demo@web.com" title="Đăng ký tư vấn"><i class="fa fa-envelope"></i></a></li><li><a aria-label="gọi điện thoại cho LPTech" href="tel:0963 400 234" title="gọi điện thoại " rel="noopener"><img src="https://webkhoinghiep.net/wp-content/uploads/2020/12/call.png" alt="gọi điện thoại cho chúng tôi" ><div class="animated infinite zoomIn mypage-alo-ph-circle"></div><div class="animated infinite pulse mypage-alo-ph-circle-fill"></div></a></li><li><a href="https://zalo.me/0913245865" title="Chat zalo" rel="noopener" class="zalo" aria-label="gọi zalo cho LPTech"><img src="https://webkhoinghiep.net/wp-content/uploads/2020/12/zalo.png" alt="zalo" ></a></li></ul>
Công Ty Thiết Kế Website Tại Đồng Tháp – Hinatech
Địa chỉ: Số 11, Đường Nguyễn Thị Lựu, Phường 4, Tp. Cao Lãnh, tỉnh Đồng Tháp
Mail: info@thietkewebsitedongthap.comtranngocleha@gmail.com
Hotline: 035.759.2458 – 0945.99.66.84
Page: www.thietkewebsitedongthap.com
Page: https://www.facebook.com/thietkewebsitedongthap

CÓ THỂ BẠN QUAN TÂM

Thiết kế website nội thất tại Đồng Tháp
Thiết kế website nội thất tại Đồng Tháp – Tặng Tên Miền, Hosting, Miễn phí Traffic ĐƠN VỊ THIẾT KẾ WEBSITE NỘI ...
wordpress hosting
[HOT ] 8 Lưu Ý Cách Chọn (WORDPRESS HOSTING) | TRANHAIT.COM
WordPress đang là mã nguồn mở được sử dụng nhiều nhất trên thế giới. Nắm bắt được xu thế đó, nhiều ...
Dich Vu SEO
Dịch Vụ SEO Đồng Tháp
Dịch vụ SEO Đồng Tháp, chúng tôi sẽ giúp bạn phát triển doanh nghiệp của bạn lên một tầm cao mới.
Báo động nền tảng website WordPress bị hacker tấn công lừa đảo
Báo động nền tảng website WordPress bị hacker tấn công lừa đảo
Vượt qua cơ chế bảo vệ của Wordfence (“tường lửa” của WordPress), các hacker sẽ lợi dụng tấn công thay đổi ...
cost
Thiết Kế Website Quảng Bình
Khi gõ từ khóa “thiết kế website”, hoặc “công ty thiết kế web” trên Google, khách hàng dễ bị bối rối ...
Cong Ty Thiet Ke Web Tai Dong Thap
Công Ty Thiết Kế Website Tại Đồng Tháp
Kính gửi: Quý Khách hàng Thiết kế website đồng tháp là một trong những doanh nghiệp đứng đầu về ứng dụng công nghệ ...
Thiết kế website máy móc công nghiệp
Link Demo : Website máy móc công nghiệp Det Tadalafil gjør det er at det hemmer PDE5 eg nærmere bestemt testosteron ...
website ban thuc pham sach 1
Giao diện website bán thực phẩm sạch
Vifonic xin giới thiệu đến Quý khách mẫu giao diện website mới: website bán hàng thực phẩm sạch với đầy đủ các tính năng của một ...
Mẫu website bán hàng đẹp
Tất cả lập trình là lập trình web
Bài viết này của tác giả Jeff Atwood (là người lập ra trang web hỏi đáp nổi tiếng StackOverflow.com) tranh luận ...