Flatsome Tips

Hướng dẫn tạo nút Sticky Call Button rung lắc bắt mắt không dùng plugin

 11 Tháng Mười Hai, 2021

Mình thuộc team hạn chế lạm dụng plugin, nên bài viết này, mình sẽ chia sẻ với các bạn cách đơn giản để tạo nút Sticky Call Button rung lắc cực ngầu, cố định chạy dọc website mà không cần phải dùng đến sự trợ giúp của plugin.

Share

Trong bài viết này, mình sẽ chia sẻ với các bạn cách tạo nút gọi cố định chạy dọc website – Sticky Call Button thuần với HTML và CSS, đơn giản – gọn – nhẹ nhưng vẫn đầy đủ yếu tố rung lắc cực bắt mắt. Các bạn có thể tham khảo demo ngay tại bài viết này của mình.

Code tạo nút Sticky Call Button

Dưới đây là toàn bộ đoạn code HTML & CSS dùng để tạo nút gọi cố định chạy dọc website – Sticky Call Button, các bạn chỉ cần coppy lại và dán vào sau cùng file functions.php trong thư mục child-theme là được (Áp dụng cho theme Flatsome, các theme khác, các bạn tham khảo cách thực hiện bên dưới).

function sticky_call_button_mywebsite(){?> 
<style>
/*CSS hotline */
.hotline-phone-ring-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
}
.hotline-phone-ring .icon-phone{color:white}
.hotline-phone-ring {
  position: relative;
  visibility: visible;
  background-color: transparent;
  width: 110px;
  height: 110px;
  cursor: pointer;
  z-index: 11;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transition: visibility .5s;
  left: 0;
  bottom: 0;
  display: block;
}
.hotline-phone-ring-circle {
	width: 85px;
  height: 85px;
  top: 10px;
  left: 10px;
  position: absolute;
  background-color: transparent;
  border-radius: 100%;
  border: 2px solid #7a9c59;
  -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  transition: all .5s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 0.5;
}
.hotline-phone-ring-circle-fill {
	width: 55px;
	height: 55px;
	top: 26px;
	left: 26px;
	position: absolute;
	background-color: #7a9c59;
	border-radius: 100%;
	border: 2px solid transparent;
	-webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
	animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
	transition: all .5s;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
}
.hotline-phone-ring-img-circle {
	background-color: #519311;
	width: 40px;
	height: 40px;
	border: 1px solid white!important;
	top: 33px;
	left: 33px;
	position: absolute;
	background-size: 20px;
	border-radius: 100%;
	border: 2px solid transparent;
	-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
	animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hotline-bar {
  position: absolute;
  background: #e7a442;
  border: 1px solid white;
  height: 40px;
  width: 180px;
  padding: 0 10px;
  background-size: 100%;
  cursor: pointer;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  z-index: 9;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  left: 33px;
  bottom: 37px;
}
.hotline-bar > a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  text-indent: 50px;
  display: block;
  letter-spacing: 1px;
  line-height: 40px;
  font-family: Arial;
}
.hotline-bar > a:hover,
.hotline-bar > a:active {
  color: #fff;
}
@-webkit-keyframes phonering-alo-circle-anim {
  0% {
    -webkit-transform: rotate(0) scale(0.5) skew(1deg);
    -webkit-opacity: 0.1;
  }
  30% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    -webkit-opacity: 0.5;
  }
  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    -webkit-opacity: 0.1;
  }
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
  0% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.6;
  }
  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.6;
  }
}
@-webkit-keyframes phonering-alo-circle-img-anim {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
}
@media screen and (max-width: 549px) {
.hotline-phone-ring-wrap{display: none!important;}
}/*Ẩn trên mobile*/
</style>
<div class="hotline-phone-ring-wrap">
	<div class="hotline-phone-ring">
		<div class="hotline-phone-ring-circle"></div>
		<div class="hotline-phone-ring-circle-fill"></div>
		<div class="hotline-phone-ring-img-circle">
		<a href="tel:0935355881">
			<i class="icon-phone"></i>
		</a>
		</div>
	</div>
	<div class="hotline-bar">
		<a href="tel:0935355881">
			<span>0935 355 881</span>
		</a>
	</div>
</div>
<?php };
add_action('wp_footer','sticky_call_button_mywebsite');
0935 355 881
CHÚ Ý
  • Các bạn nhớ thay lại số điện thoại demo tại các dòng 173, 179 & 180 thành liên hệ của các bạn.
  • Đoạn code 164 -> 166 được dùng để ẩn nút gọi trên thiết bị mobile, tùy theo nhu cầu sử dụng mà các bạn có thể để lại hoặc xóa đoạn này đi.

Ngoài cách trên, các bạn cũng có thể coppy từ dòng số 2 đến 183, và dán vào “FOOTER SCRIPTS” trong “Advanced” của Flatsome là được.

Chú ý với Theme khác - Không phải Flatsome

Đoạn code dòng 174 là icon phone mặc định có sẵn của Flatsome, nên các theme khác sẽ ko hiển thị icon phone này. Các bạn có thể cài đặt thêm bộ icon của “Font Awesome” và sử dụng icon phone để hiển thị thay thế.

Hoặc, các bạn cũng có thể tải ảnh icon phone bên dưới về, upload lên media của các bạn để sử dụng.

Các bạn chỉ cần coppy link ảnh icon-phone đã upload, thay thế cho link trong src=”link-cũ” bên dưới, sau đó coppy toàn bộ đoạn html, dán đè lên dòng 174 là được.

<img width="20" height="20" src="https://mywebsite.com.vn/wp-content/uploads/2021/12/icon-phone.png">

Trong quá trình thực hiện, nếu có thắc mắc nào, các bạn có thể để lại bình luận cho mình phía dưới bài viết.

Chúc các bạn thành công!

4.1/5 - (7 bình chọn)
Huy Real Property

Chào các bạn! Tôi là Huy Real Property, có sở thích tìm hiểu về Marketing Online - Xây dựng Website Wordpress, và chia sẻ những kinh nghiệm lụm lặt được của mình với các bạn có cùng đam mê. Hy vọng các bài viết của tôi sẽ phần nào hữu ích với các bạn!

Bài Viết Cùng Chủ Đề
Hướng dẫn tạo hiệu ứng line effect khi rê chuột vào bài viết
Hướng dẫn thu gọn Vertical Timeline với “Xem Thêm” button
Hướng dẫn tạo Timeline Vertical đơn giản cho Flatsome
Hướng dẫn tạo nút Sticky Share Buttons cho Flatsome
Hướng dẫn tạo menu button chạy dọc website trong Flatsome
Hướng dẫn Flatsome – Tái sử dụng lại phần tử, Template mẫu đã thiết kế
Theo dõi
Thông báo của
guest

0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x
0935 355 881 Zalo Chat Mẫu Website
Mẫu Website
0935 355 881