Chia sẻ mã code liên hệ nhanh bằng HTML và CSS

Chia sẻ mã code liên hệ nhanh sử dụng HTML và CSS. Thanh liên hệ nhanh này sẽ hiển thị cố định trên website, bao gồm các nút: Tìm đường, Chat Zalo, Gọi điện, Messenger và Nhắn tin SMS.

Trên desktop, thanh liên hệ sẽ hiển thị dọc bên trái. Trên mobile, thanh liên hệ sẽ chuyển thành thanh ngang cố định ở cuối màn hình.

Mã CSS

.phone-mobile {
  display: none;
}

.quick-contact {
  position: fixed;
  left: 13px;
  background: #fff;
  border-radius: 5px;
  width: auto;
  z-index: 150;
  bottom: 50px;
  padding: 10px 0;
  border: 1px solid #f2f2f2;
}

.quick-contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quick-contact ul li {
  list-style: none !important;
}

.quick-contact ul > li a {
  border: none;
  padding: 3px;
  display: block;
  border-radius: 5px;
  text-align: center;
  font-size: 10px;
  line-height: 15px;
  color: #515151;
  font-weight: 700;
  max-width: 72.19px;
  max-height: 54px;
  text-decoration: none;
}

.quick-contact ul > li .chat_animation {
  display: none;
}

.quick-contact ul > li a i {
  width: 33px;
  height: 33px;
  display: block;
  margin: auto;
}

.quick-contact ul > li a i.ticon-heart {
  background: url(https://i.imgur.com/cjYw9lk.png) no-repeat;
  background-size: contain;
  width: 36px;
  height: 36px;
  display: block;
}

.quick-contact ul > li a i.ticon-zalo-circle2 {
  background: url(https://i.imgur.com/617RkhE.png) no-repeat;
  background-size: contain;
  width: 36px;
  height: 36px;
  display: block;
}

.quick-contact li .button {
  background: transparent;
}

.quick-contact ul > li a i.ticon-angle-up {
  background: url(https://i.imgur.com/inoTbxx.png) no-repeat;
  background-size: contain;
  width: 36px;
  height: 36px;
  display: block;
}

.quick-contact ul li .button .btn_phone_txt {
  position: relative;
  font-size: 10px;
  font-weight: bold;
  text-transform: none;
}

.quick-contact ul li .button .phone_animation i {
  display: inline-block;
  width: 27px;
  font-size: 26px;
  margin-top: 12px;
}

.quick-contact ul > li a i.ticon-messenger {
  background: url(https://i.imgur.com/grAPPGF.png) no-repeat;
  background-size: contain;
  width: 36px;
  height: 36px;
  display: block;
}

.quick-contact ul > li a i.ticon-chat-sms {
  background: url(https://i.imgur.com/2lBeRJf.jpg) no-repeat;
  background-size: contain;
  width: 38px;
  height: 36px;
  display: block;
}

.quick-contact ul > li a i.icon-phone-w {
  background: url(https://i.imgur.com/rMV8G99.png) no-repeat;
  background-size: contain;
}

/* Responsive mobile */
@media only screen and (max-width: 600px) {
  .quick-contact li .chat_animation {
    display: block !important;
  }

  .quick-contact li .button .phone_animation {
    box-shadow: none;
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #6cb917;
    line-height: 15px;
    border: 2px solid white;
  }

  .quick-contact ul > li a {
    padding: 0;
    margin: 0 auto;
  }

  .quick-contact {
    background: white;
    width: 100%;
    border-radius: 0;
    color: #fff;
    height: 60px;
    line-height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 5px;
    margin: 0;
    box-shadow: 0 4px 10px 0 #000;
  }

  .quick-contact li {
    float: left;
    width: 20%;
    list-style: none;
    height: 50px;
  }

  .phone-mobile {
    display: block !important;
  }
}

Mã HTML

<div class="quick-contact">
  <ul>
    <li>
      <a href="https://goo.gl/maps/RThyPoKXrvrLmskz6" rel="nofollow" target="_blank">
        <i class="ticon-heart"></i>Tìm đường
      </a>
    </li>
    <li>
      <a href="https://zalo.me/0123456789" rel="nofollow" target="_blank">
        <i class="ticon-zalo-circle2"></i>Chat Zalo
      </a>
    </li>
    <li class="phone-mobile">
      <a href="tel:0123456789" rel="nofollow" class="button">
        <span class="phone_animation animation-shadow">
          <i class="icon-phone-w" aria-hidden="true"></i>
        </span>
        <span class="btn_phone_txt">Gọi điện</span>
      </a>
    </li>
    <li>
      <a href="https://www.messenger.com/t/nguyenlap" rel="nofollow" target="_blank">
        <i class="ticon-messenger"></i>Messenger
      </a>
    </li>
    <li>
      <a href="sms:0123456789" class="chat_animation">
        <i class="ticon-chat-sms" aria-hidden="true" title="Nhắn tin sms"></i>
        Nhắn tin SMS
      </a>
    </li>
    <li class="to-top-pc">
      <a href="#" rel="nofollow">
        <i class="ticon-angle-up" aria-hidden="true" title="Quay lên trên"></i>
      </a>
    </li>
  </ul>
</div>

Bạn chỉ cần thay số điện thoại 0123456789 và các link Zalo, Messenger, Google Maps thành thông tin của mình là có thể sử dụng được.