Post này sẽ 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.

Ok bắt đầu luôn. Không biết đăt tên là gì cứ quất đại là style 1 – style 100 nhé :v . Vì update liên tục mà, nếu anh em nào có code đẹp thì có thể comment góp ý để mình tổng hợp vào luôn. Thank you!

Style 1

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

.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";
}

JS code

jQuery(document).ready(function($){
  $('.icon-tem').click(function(){
    $('ul').toggleClass('active')
  })
})

[isures_post_ads cat_ids=”19″ title=”Plugin của tôi” ppp=”4″]

Style 2:

Html Code

<div id="support">
  <div id="iconChat"></div>
  <ul id="option">
    <li>
      <a href="">
        <i class="fab fa-facebook-messenger"></i>
        <span>Chat Facebook</span>
      </a>
    </li>
    <li>
      <a href="">
        <i class="fas fa-phone"></i>
        <span>0899 326 019</span>
      </a>
    </li>
    <li>
      <a href="">
        <i class="fas fa-eye"></i>
        <span>Xem Giao Diện</span>
      </a>
    </li>
    <li>
      <a href="">
        <i class="fas fa-code"></i>
        <span>Share Code</span>
      </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();
    });
});

[isures_post_ads cat_ids=”23″ title=”Mẫu website hot của tôi” ppp=”4″]

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

Style 1

Style 2:

Bài viết liên quan