Tạo nút liên hệ đẹp cho website sử dụng HTML và CSS

Xin chào, bài viết sau đây mình chia sẻ tới các bạn một đoạn code HTML và CSS đẹp, dùng để tạo các nút liên hệ cho các website WordPress.

Thao tác rất đơn giản, chỉ việc copy đoạn code sau bỏ vào Footer Script của website.

Lưu ý: nhớ chỉnh sửa lại các thông tin liên hệ (call, mess, zalo) cho phù hợp nhé.

• Nếu là theme Flatsome: Từ giao diện admin bạn chọn Flatsome -> Advanced -> Global Setting -> Footer Script và chèn 2 đoạn code dưới đây!
• Với theme bất kỳ: chọn giao diện -> sửa. Copy bỏ phần code html đầu tiên vào file footer, phía trước thẻ </body>. Sau đó copy phần code css thứ 2 và chèn vào cuối file style.css.

Code html:

<div class="echbay-sms-messenger style-for-position-br">
	<div class="phonering-alo-alo">
		<a href="tel:0387440192" rel="nofollow" class="echbay-phonering-alo-event">.</a>
	</div>
	<div class="phonering-alo-sms">
		<a href="sms:0387440192" rel="nofollow" class="echbay-phonering-sms-event">.</a>
	</div>
	<div class="phonering-alo-zalo">
		<a href="https://zalo.me/0387440192" target="_blank" rel="nofollow" class="echbay-phonering-zalo-event">.</a>
	</div>
	<div class="phonering-alo-messenger">
		<a href="https://www.messenger.com/t/taphoammo.vn" target="_blank" rel="nofollow" class="echbay-phonering-messenger-event">.</a>
	</div>
</div>

Code CSS:

.echbay-sms-messenger div.phonering-alo-zalo, 
.echbay-sms-messenger div.phonering-alo-alo {
	background-color:#0084ff
}
.echbay-sms-messenger div.phonering-alo-sms {
	background-color:#f60
}
.echbay-sms-messenger div.phonering-alo-messenger {
	background-color:#e60f1e
}
 
.echbay-sms-messenger {
	width:45px
}
.echbay-sms-messenger a {
	line-height:45px;
        color: transparent;
display:block;
}
.echbay-sms-messenger {
	display:block
}
.echbay-sms-messenger div.phonering-alo-zalo {
	display: block
}
 
.echbay-sms-messenger div.phonering-alo-alo {
    background-image: url(https://taphoammo.vn/wp-content/uploads/2023/01/call.png);
}
.echbay-sms-messenger div.phonering-alo-sms {
    background-image: url(https://taphoammo.vn/wp-content/uploads/2023/01/mail.png);
    background-color: #f60;
    background-size: 60%;
}
.echbay-sms-messenger div.phonering-alo-zalo {
    background-image: url(https://taphoammo.vn/wp-content/uploads/2023/01/zalo.png);
}
.echbay-sms-messenger div.phonering-alo-messenger {
    background-image: url(https://taphoammo.vn/wp-content/uploads/2023/01/messenger.png);
    background-color: #e60f1e;
}
.echbay-sms-messenger div {
    margin: 14px 0;
    background: #0084FF center no-repeat;
    background-size: 70%;
    border-radius: 50%;
    box-shadow: 0 3px 10px #888;
}
 
.echbay-sms-messenger {
    text-align: center;
    right:20px;
    position: fixed;
    bottom: 20px;
    z-index: 999;
}