tổng hợp code các nút liên hệ, follow blabla, với nhiều style đẹp mà trong quá trình làm web cho khách mình code rồi chia sẻ để ae tham khảo thêm ý tưởng.
Button follow , contact liên hệ đẹp
Thống kê bài viết

Phần giao DIện 1 :

CÓ THỂ BẠN QUAN TÂM
- Thêm Category vào Title trong UX Builder theme Flatsome 09/2023
- Tạo nút coppy link và share link trong wordpress 09/2023
- AZDIGI ưu đã 40% hosting VPS cho khách hàng đăng ký mới 09/2023
- Shortcode WordPress và cách tạo Shortcode WordPress ứng dụng Shortcode trong Flatsome 09/2023
- Lightbox Flatsome – Thêm form đăng ký newsletter 09/2023
- Tino Giảm 40% NVMe Web Hosting và VPS NVMe mừng siêu phẩm mới 09/2023
Phần code Html code
<div class=”follow”>
<div class=”icon-tem”></div>
<ul class=”social”>
<li><a href=””><i class=”fab fa-facebook-f”></i></a></li>
<li><a href=””><i class=”fab fa-instagram”></i></a></li>
<li><a href=””><i class=”fab fa-twitter”></i></a></li>
<li><a href=””><i class=”fab fa-youtube”></i></a></li>
</ul>
</div>
Phần CSS
có thể chèn vào tùy chỉnh css trên theme
.follow {
bottom: 100px;
right: 100px;
width: 50px;
height: 50px;
position: fixed;
}
.follow ul.social{
position: relative;
margin:0;
padding:0;
width: 100%;
height: 100%;
}
.follow ul li{
position: absolute;
width: 100%;
height:100%;
top: 0;
left: 0;
list-style-type: none;
background: #fff;
transition: 0.5s;
overflow: hidden;
transform: scale(0);
border-radius: 4px;
}
.follow ul li a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 50px;
text-align: center;
color: #262626;
font-size: 20px;
transition: 0.5s;
}
.follow ul li a:hover{
color: #189eff;
}.follow ul.active li{
transform: scale(0.9);
}
.follow ul.active li:nth-child(1){
top: -100%;
left: 0;
transition-delay: 0.2s;
}
.follow ul.active li:nth-child(2){
top: 0;
left: 100%;
transition-delay: 0.4s;
}
.follow ul.active li:nth-child(3){
top: 100%;
left: 0;
transition-delay: 0.6s;
}
.follow ul.active li:nth-child(4){
top: 0;
left: -100%;
transition-delay: 0.8s;
}
.icon-tem{
position: absolute;
top:0;
left:0;
background: #189eff;
width:100%;
height: 100%;
transform: scale(0.9);
border-radius: 4px;
overflow: hidden;
z-index: 1;
cursor: pointer;
}
.icon-tem:before{
content:”\f0f3″;
font-family: “Font Awesome 5 Free”;
font-weight: 700;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
}
.icon-tem.active:before{
content:”\f00d”;
}
Phần code JS
Có thể chèn trong cpanel thêm ( Flatsome) hoặc chèn trực tiếp theme
jQuery(document).ready(function($){
$(‘.icon-tem’).click(function(){
$(‘ul’).toggleClass(‘active’)
})
})
Phần giao diện 2

Html Code
<div class=”follow”>
<div class=”icon-tem”></div>
<ul class=”social”>
<li><a href=””><i class=”fab fa-facebook-f”></i></a></li>
<li><a href=””><i class=”fab fa-instagram”></i></a></li>
<li><a href=””><i class=”fab fa-twitter”></i></a></li>
<li><a href=””><i class=”fab fa-youtube”></i></a></li>
</ul>
</div>
Css Code
#support ul li {
list-style-type: none;
margin: 0;
padding: 0;
}#support a {
text-decoration: none;
color: #333;
}/* Style Css */
/* Icon Click */
#support {
position: fixed;
right: 10px;
bottom: 10px;
width: 60px;
height: 60px;
z-index: 99999;
}#iconChat {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #189eff;
cursor: pointer;
border-radius: 99px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, .6);
}#iconChat:before {
content: “\f1d8”;
position: absolute;
font-family: “Font Awesome 5 Free”;
font-weight: 700;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
top: 10px;
left: 10px;
color: #189eff;
background: #fff;
border-radius: 99px;
}/* Style Option Tab */
#option {
background: center no-repeat #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, .6);
width: 235px;
position: absolute;
bottom: 60px;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 14px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 7px;
-webkit-transform-origin: 80% 105%;
-ms-transform-origin: 80% 105%;
transform-origin: 80% 105%;
-webkit-transition: ease-out .12s all;
-o-transition: ease-out .12s all;
transition: ease-out .12s all;
z-index: 10000;
display: none
}#option:before {
content: “”;
position: absolute;
bottom: -7px;
right: 25px;
left: auto;
display: inline-block!important;
border-right: 10px solid transparent;
border-top: 10px solid #FFF;
border-left: 10px solid transparent;
}#option li {
width: 100%;
}#option li a {
display: inline-block;
padding: 8px 10px;
}#option li:hover {
background: #eee;
}#option li a i {
display: inline-block;
width: 45px;
height: 45px;
line-height: 45px;
background: #189eff;
text-align: center;
border-radius: 99px;
color: #fff;
margin-right: 8px;
}/* Background Icon */
#option li a i.fa-facebook-messenger {
background: #0078FF;
}#option li a i.fa-phone {
background: #4EB625;
}#option li a i.fa-code {
background: #000;
}#option li a i.fa-eye {
background: #FF643A;
}
JS code
jQuery(document).ready(function () {
jQuery(“#iconChat”).click(function () {
jQuery(‘#option’).toggle();
});
jQuery(“#iconChat”).click(function (e) {
e.stopPropagation();
});jQuery(document).click(function () {
jQuery(“#option”).hide();
});
});
Chúc các bạn thành công nhé
theo : https://downvn.net/