Code Chèn 4 Nút Liên Hệ Vào Chân Trang Website

Share on facebook
Facebook
Share on pinterest
Pinterest
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on tumblr
Tumblr

Demo ngay bên dưới

				
					<section class="mobile_chat hidden-md hidden-lg">
	<div class="container">
		<div class="row">
			<div class="col-xs-3 chat-item">
				<a href="tel:0343758125" class="chat-item-url">
					<div class="chat-item-image">
						<img src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://dipigo.com/wp-content/uploads/2021/04/icon_phone.png" class="lazy-load img-responsive" alt="goi-dien">
					</div>
					<div class="chat-item-text">
						Gọi điện
					</div>
				</a>
			</div>
			<div class="col-xs-3 chat-item">
				<a href="sms:0343758125" class="chat-item-url">
					<div class="chat-item-image">
						<img src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://dipigo.com/wp-content/uploads/2021/04/icon_sms.png" class="lazy-load img-responsive" alt="nhan-tin">
					</div>
					<div class="chat-item-text">
						Nhắn tin
					</div>
				</a>
			</div>
			<div class="col-xs-3 chat-item">
				<a href="http://zalo.me/0343758125" class="chat-item-url">
					<div class="chat-item-image">
						<img src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://dipigo.com/wp-content/uploads/2021/04/icon_zalo.png" class="lazy-load img-responsive" alt="chat-zalo">
					</div>
					<div class="chat-item-text">
						Chat Zalo
					</div>
				</a>
			</div>
			<div class="col-xs-3 chat-item">
				<a href="m.me/dipigo">
					<div class="chat-item-image">
						<img src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="https://dipigo.com/wp-content/uploads/2021/04/icon_fb.png" class="lazy-load img-responsive" alt="facebook">
					</div>
					<div class="chat-item-text">
						Facebook
					</div>
				</a>
			</div>
		</div>
	</div>
</section>

<style>
.mobile_chat {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: #ebebeb 0 0 20px;
}
.chat-item {
    padding: 5px 10px;
}
.col-xs-3 {
    width: 25%;
}
.chat-item a {
    display: block;
}
.chat-item .chat-item-image {
    width: 100%;
    float: left;
}
.chat-item .chat-item-image {
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat-item .chat-item-image img {
    height: 32px;
}
.chat-item .chat-item-text {
    width: 100%;
    float: left;
}
.chat-item .chat-item-text {
    height: 20px;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat-item .chat-item-text {
    width: 100%;
    float: left;
}
.chat-item .chat-item-text {
    height: 20px;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
				
			

Bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *