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
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.
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');
- 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!
