Tạo button follow, contact liên hệ đẹp cuối trang

Tổng hợp code các nút liên hệ, follow cuối trang, với nhiều style đẹp mà trong quá trình làm website cho khách mình code rồi chia sẻ để mọi người tham khảo thêm ý tưởng.

Tạo button follow, contact liên hệ đẹp cuối trang

Phần giao DIện1:

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 làm đẹp

Có thể chèn vào tùy chỉnh css bổ sung 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 theme ( 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