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

20 Nov, 2021 admin

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

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: var(--wpr-bg-ac31b701-e7ed-43aa-9754-d1501f6f6470) 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: var(--wpr-bg-13a1baad-9528-431d-a101-dddaa9137614) 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(){;?>

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.

Donate ủng hộ tinh thần

Có bất kì câu hỏi nào thì hãy gửi về cho mình nhé, mình sẽ cố gắng giải đáp trong thời gian sớm nhất

Ủng hộ mình một ly cà phê nhé: Vì đầy là động lực để mình có thể giúp đỡ mọi người nhé.

Ủng hộ bằng momo:

0 0 votes

Article Rating

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

Donate ủng hộ tinh thần

Bài Viết Liên Quan