Chèn 4 nút liên hệ cố định vào chân trang web

Thứ hai - 01/04/2024 04:31
Chèn 4 nút liên hệ cố định vào chân trang web
HTML:
<section class="mobile_chat hidden-md hidden-lg">
	<div class="container">
		<div class="row codfe_row">
			<div class="col-xs-3 chat-item">
				<a href="tel:0888037777" class="chat-item-url">
					<div class="chat-item-image">
					<img src="https://trinhloc.com/uploads/blog/2024/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:0888037777" class="chat-item-url">
					<div class="chat-item-image">
					<img src="https://trinhloc.com/uploads/blog/2024/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/0888037777" class="chat-item-url">
					<div class="chat-item-image">
					<img src="https://trinhloc.com/uploads/blog/2024/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="https://www.messenger.com/t/https://www.facebook.com/th.baoloc/">
					<div class="chat-item-image">
					<img src="https://trinhloc.com/uploads/blog/2024/icon_fb.png" class="img-responsive" alt="facebook">
					</div>
					<div class="chat-item-text">
						Facebook
					</div>
				</a>
			</div>
		</div>
	</div>
</section>


CSS:
<style>
.codfe_row{
   display: flex;
}
.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>
 

Tổng số điểm của bài viết là: 20 trong 4 đánh giá

Xếp hạng: 5 - 4 phiếu bầu
Click để đánh giá bài viết
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây