Hướng dẫn tạo bộ button liên hệ cực đẹp

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

Button liên hệ là 1 trong những phần không thể thiếu được trong website của bạn, vậy thì hôm nay mình sẽ share cho các bạn 1 đoạn code để các bạn có thể tự tạo cho mình 1 button liên hệ thật đẹp mắt chỉ với HTML và CSS thôi nhé.

Mình demo để các bạn có thể thấy được trước kết quả nhé.

Trước khi bắt tay vào làm, các bạn lưu ý giúp mình 1 vài vấn đề sau:

Mình dùng Fontawsome 5.9, nên các bạn phải sử dụng font này để hiển thị được hình ảnh nhé.
Các bạn chèn code vào phần footer để có thể hiển thị ở toàn bộ các page.

Các bạn có thể sử dụng đoạn code sau:

Thêm HTML hiển thị các button của call in all

<nav class="float-action-button">
  <a href="#" class="buttons zalo" title="zalo">
          <i class="fa fa-zalo"></i>
        </a>
  <a href="#" class="buttons" title="phone">
          <i class="fas fa-phone"></i>
        </a>
  <a href="#" class="buttons" title="Messenger">
          <i class="fab fa-facebook-messenger"></i>
        </a>
  <a href="#" class="buttons main-button">
          <i class="fa fa-times"></i>
          <i class="fa fa-share-alt"></i>
        </a>
</nav>

Sau đó chúng ta sẽ tiến hành thêm CSS cho đoạn code trên cho nó đẹp mắt nhé.

.fa-zalo{
   background: url(https://pttuan410.com/wp-content/uploads/2021/05/zalo.png) center center no-repeat;
}
nav.float-action-button {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 1em;
}

a.buttons {
  box-shadow: 0 5px 11px -2px rgba(0, 0, 0, 0.18), 0 4px 12px -7px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  color: #fff;
  font-size: 2.6em;
  padding: 1px 0 0 0;
  text-align: center;
  display: block;
  margin: 20px auto 0;
  position: relative;
  -webkit-transition: all .1s ease-out;
  transition: all .1s ease-out;
}

a.buttons:active,
a.buttons:focus,
a.buttons:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
  text-decoration: none;
}

a.buttons:not(:last-child) {
  width: 40px;
  height: 40px;
  margin: 20px auto 0;
  opacity: 0;
  font-size: 1.6em;
  padding-top: 4px;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
}

a.buttons.main-button > i:first-child {
  position: relative;
  margin-top: 10px;
}

nav.float-action-button:hover a.buttons:not(:last-child) {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  margin: 20px auto 0;
}

a.buttons:nth-last-child(1) {
  -webkit-transition-delay: 25ms;
  transition-delay: 25ms;
  background-color: #D32F2F;
}

a.buttons:nth-last-child(1) i.fa {
  transform: rotate3d(0, 0, 1, 0);
  transition: content 0.4s, transform 0.4s, opacity 0.4s;
}

a.buttons:nth-last-child(1):hover i.fa {
  transform: rotate3d(0, 0, 1, -180deg);
}

a.buttons:nth-last-child(1) i.fa:nth-last-child(1) {
  position: absolute;
  margin: 10px 0 0 -32px;
}

a.buttons:nth-last-child(1) i.fa:nth-last-child(2) {
  opacity: 0;
}

a.buttons:nth-last-child(1):hover i.fa:nth-last-child(1) {
  opacity: 0;
}

a.buttons:nth-last-child(1):hover i.fa:nth-last-child(2) {
  opacity: 1;
}

a.buttons:not(:last-child):nth-last-child(2) {
  -webkit-transition-delay: 50ms;
  transition-delay: 20ms;
  background-color: #3b5998;
}

a.buttons:not(:last-child):nth-last-child(3) {
  -webkit-transition-delay: 75ms;
  transition-delay: 40ms;
  background-color: #1da1f2;
}

a.buttons:not(:last-child):nth-last-child(4) {
  -webkit-transition-delay: 100ms;
  transition-delay: 60ms;
  background-color: #dd4b39;
}
.buttons.zalo{
	background: url(https://pttuan410.com/wp-content/uploads/2021/05/zalo.png) center center no-repeat;
    background-size: contain;
    border-radius: 100%;	
}

Các bạn copy 2 đoạn code trên và dán nó vào phần footer nhé, để có thể hiển thị ở toàn bộ các trang web.

Như vậy là xong, các bạn có thể tận hưởng thành quả của mình nhé.

BONUS: Đối với các bạn sài Flatsome thì có thể copy đoạn code dưới này, vì mình đã hook sẵn nó vào vị trí của footer rồi nên các bạn chỉ cần cop paste về là dùng luôn không phải viết function hook nó lại.

Ngoài ra thì các bạn có thể tìm vị trí hook mà mình muốn bằng plugin show tất cả hook trong Flatsome mà mình viết nhé.

add_shortcode('thanhtuantest','thanhtuantest');
function calls(){;?>
<nav class="float-action-button">
  <a href="#" class="buttons zalo" title="zalo">
          <i class="fa fa-zalo"></i>
        </a>
  <a href="#" class="buttons" title="phone">
          <i class="fas fa-phone"></i>
        </a>
  <a href="#" class="buttons" title="Messenger">
          <i class="fab fa-facebook-messenger"></i>
        </a>
  <a href="#" class="buttons main-button">
          <i class="fa fa-times"></i>
          <i class="fa fa-share-alt"></i>
        </a>
</nav>
<style>
.fa-zalo{
   background: url(https://pttuan410.com/wp-content/uploads/2021/05/zalo.png) center center no-repeat;
}
nav.float-action-button {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 1em;
}

a.buttons {
  box-shadow: 0 5px 11px -2px rgba(0, 0, 0, 0.18), 0 4px 12px -7px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  color: #fff;
  font-size: 2.6em;
  padding: 1px 0 0 0;
  text-align: center;
  display: block;
  margin: 20px auto 0;
  position: relative;
  -webkit-transition: all .1s ease-out;
  transition: all .1s ease-out;
}

a.buttons:active,
a.buttons:focus,
a.buttons:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
  text-decoration: none;
}

a.buttons:not(:last-child) {
  width: 40px;
  height: 40px;
  margin: 20px auto 0;
  opacity: 0;
  font-size: 1.6em;
  padding-top: 4px;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
}

a.buttons.main-button > i:first-child {
  position: relative;
  margin-top: 10px;
}

nav.float-action-button:hover a.buttons:not(:last-child) {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  margin: 20px auto 0;
}

a.buttons:nth-last-child(1) {
  -webkit-transition-delay: 25ms;
  transition-delay: 25ms;
  background-color: #D32F2F;
}

a.buttons:nth-last-child(1) i.fa {
  transform: rotate3d(0, 0, 1, 0);
  transition: content 0.4s, transform 0.4s, opacity 0.4s;
}

a.buttons:nth-last-child(1):hover i.fa {
  transform: rotate3d(0, 0, 1, -180deg);
}

a.buttons:nth-last-child(1) i.fa:nth-last-child(1) {
  position: absolute;
  margin: 10px 0 0 -32px;
}

a.buttons:nth-last-child(1) i.fa:nth-last-child(2) {
  opacity: 0;
}

a.buttons:nth-last-child(1):hover i.fa:nth-last-child(1) {
  opacity: 0;
}

a.buttons:nth-last-child(1):hover i.fa:nth-last-child(2) {
  opacity: 1;
}

a.buttons:not(:last-child):nth-last-child(2) {
  -webkit-transition-delay: 50ms;
  transition-delay: 20ms;
  background-color: #3b5998;
}

a.buttons:not(:last-child):nth-last-child(3) {
  -webkit-transition-delay: 75ms;
  transition-delay: 40ms;
  background-color: #1da1f2;
}

a.buttons:not(:last-child):nth-last-child(4) {
  -webkit-transition-delay: 100ms;
  transition-delay: 60ms;
  background-color: #dd4b39;
}
.buttons.zalo{
	background: url(https://pttuan410.com/wp-content/uploads/2021/05/zalo.png) center center no-repeat;
    background-size: contain;
    border-radius: 100%;	
}
</style>
<?php }
add_action('flatsome_after_footer','calls');

Một lưu ý nữa, đó là font trong nút call mình dùng là fontawsome 5.9, nên các bạn có thể sửa nó thành fontawsome mà mình đang dùng nhé.

Chúc các bạn thành công, có bất kì câu hỏi nào thì hãy CMT cho mình nhé, cảm ơn các bạn.

Các bài viết nên đọc

Hướng dẫn tạo elementer slider thumnail với flatsome [update Flatsome 3.14]

Hướng dẫn cách show toàn bộ các hook có trong Flatsome

Hướng dẫn tạo popup có thể bật tắt cho website của bạn mà không cần dùng plugin.

Trả lời Hủy

Flatsome tutorial, Theme flatsome, Wordpress, Wordpress tutorial