Hướng dẫn tạo nút Call Now đẹp mà đơn giản

Chào các bạn,

Hôm nay mình sẽ hướng dẫn cho các bạn tạo nút Call Now (Gọi Ngay) trên website của bạn chỉ với vài dòng html và css mà thôi.

Đầu tiên là phần code html, bạn có thể add vào header hoặc footer tuỳ bạn

<a href="tel:900" mypage="" rel="nofollow"><div
class="mypage-alo-phone"><div
class="animated infinite zoomIn mypage-alo-ph-circle"></div><div
class="animated infinite pulse mypage-alo-ph-circle-fill"></div><div
class="animated infinite tada mypage-alo-ph-img-circle"></div></div>
</a>

Tiếp sau đó, các bạn thêm đoạn css sau:

.mypage-alo-phone {
position: fixed;
left: 0px;
bottom: 0px;
visibility: visible;
background-color: transparent;
width: 110px;
height: 110px;
cursor: pointer;
z-index: 200000 !important;
}
.mypage-alo-ph-img-circle {
width: 30px;
height: 30px;
top: 43px;
left: 43px;
position: absolute;
background: rgba(30, 30, 30, 0.1) url(https://namlee.net/wp-content/uploads/2017/07/callnow.png) no-repeat center center;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
border: 2px solid transparent;
opacity: .7;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
background-color: #0089B9;
background-size: 70%;
}
.mypage-alo-ph-circle-fill {
width: 60px;
height: 60px;
top: 28px;
left: 28px;
position: absolute;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
border: 2px solid transparent;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
background-color: rgba(0, 175, 242, 0.5);
opacity: .75 !important;
}
.mypage-alo-ph-circle{
width: 90px;
height: 90px;
top: 12px;
left: 12px;
position: absolute;
background-color: transparent;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
border: 2px solid rgba(30, 30, 30, 0.4);
opacity: .1;
border-color: #0089B9;
opacity: .5;
}

Sau khi add xong thì website của bạn sẽ hiện thị nút Call Now ở góc dưới bên trái màn hình.

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