[Share Code] Nút Liên Hệ Cho Website Flatsome Cực Đẹp 01

5/5 - (1 bình chọn)

Đối với các bạn newbie thì việc chèn nút liên hệ đẹp vào website là một điều khá khó khăn, nhất là lại liên quan đến kỹ thuật HTML và CSS. Hôm nay, Miootech sẽ hướng dẫn các bạn chèn nhanh nút liên hệ siêu đẹp vào website chỉ với 1 thao tác vô cùng đơn giản. Cùng thực hiện nhé!

Bước 1: Copy đoạn HTML sau bỏ vào trong thẻ <head>…</head> hoặc <body>…</body>

<div class="call-mobile2">
<a data-animate="fadeInDown" rel="noopener noreferrer" href="//zalo.me/0394321444" target="_blank" class="button success" style="border-radius:99px;" data-animated="true">
<span>Chat Zalo </span></a>
</div>
<div class="call-mobile1">
<a data-animate="fadeInDown" rel="noopener noreferrer" href="//www.facebook.com/codfe" target="_blank" class="button success" style="border-radius:99px;" data-animated="true">
<span>Chat Facebook</span></a>
</div>
<div class="call-mobile">
<a id="callnowbutton" href="tel:0394321444">039.4321.444</a><i class="fa fa-phone"></i>
</div>

Lưu ý: Nhớ chỉnh sửa lại số điện thoại và link facebook của bạn nhé. Nếu muốn dẫn vào messenger thì có thể dùng link: //fb.com/tên rút gọn fanpage của bạn

Bước 2: Thêm CSS vào file style.css hoặc truy cập Tuỳ biến -> Add CSS -> Paste đoạn CSS này vào

.success.is-underline:hover,.success.is-outline:hover,.success {
background-color:#1E73BE;
color:white !important;
}
.call-mobile {
background:#ED1C24;
position:fixed;
bottom:10px;
height:40px;
line-height:40px;
padding:0 0px 0 0px;
border-radius:40px;
color:#fff;
left:20px;
z-index:99999;
}
.call-mobile1 {
position:fixed;
bottom:52px;
height:40px;
line-height:40px;
padding:0 0px 0 0px;
border-radius:40px;
color:#fff;
left:20px;
z-index:99999;
}
.call-mobile2 {
position:fixed;
bottom:93px;
height:40px;
line-height:40px;
padding:0 0px 0 0px;
border-radius:40px;
color:#fff;
left:20px;
z-index:99999;
}
.call-mobile i {
font-size:20px;
line-height:40px;
background:#B52026;
border-radius:100%;
width:40px;
height:40px;
text-align:center;
float:right;
}
.call-mobile a {
color:#fff;
font-size:18px;
font-weight:bold;
text-decoration:none;
margin-right:10px;
padding-left: 10px;
}