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

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 decoding="async" src="https://dipigo.com/wp-content/uploads/2021/04/icon_phone.png" class="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 decoding="async" src="https://dipigo.com/wp-content/uploads/2021/04/icon_sms.png" class="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 decoding="async" src="https://dipigo.com/wp-content/uploads/2021/04/icon_zalo.png" class="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 decoding="async" src="https://dipigo.com/wp-content/uploads/2021/04/icon_fb.png" class="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>