Tạo nút Gọi điện nhanh (Call now) đẹp mắt cho website với CSS3

Hướng dẫn tạo nút Gọi điện (Call now) nhấp nháy đẹp mắt cho web. Tạo nút gọi điện rung và nhấp nháy chuyển động cho website.

Dùng cho mọi website, blog, cms đều rất ok. chỉ cần coppy đoạn code HTML và CSS ở bên dưới đặt vào 1 vị trí nào đó trong theme website của bạn là dùng được.

CSS CHO NÚT GỌI

<style>
/* Mở đầu đoạn CSS HOTLINE */
.phonering-alo-phone {position:fixed;visibility:hidden;background-color:transparent;width:200px;height:200px;
cursor:pointer;z-index:200000!important;right:150px;bottom:-50px;left:-50px;display:block;
-webkit-backface-visibility:hidden;
-webkit-transform:translateZ(0);
transition:visibility .5s;
}
.phonering-alo-phone.phonering-alo-show {visibility:visible}
.phonering-alo-phone.phonering-alo-static {opacity:.6}
.phonering-alo-phone.phonering-alo-hover,.phonering-alo-phone:hover {opacity:1}
.phonering-alo-ph-circle {width:160px;height:160px;top:20px;left:20px;position:absolute;
background-color:transparent;border-radius:100%;border:2px solid rgba(30,30,30,0.4);
opacity:.1;
-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%
}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle {
-webkit-animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important;
animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important
}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle {
-webkit-animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important;
animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important
}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone:hover .phonering-alo-ph-circle {
border-color:#00aff2;
opacity:.5
}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle {
border-color:#272d6b;
opacity:.5
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {
border-color:#00aff2;
opacity:.5
}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle {
border-color:#ccc;
opacity:.5
}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle {
border-color:#75eb50;
opacity:.5
}
.phonering-alo-ph-circle-fill {width:100px;height:100px;top:50px;left:50px;position:absolute;background-color:#000;
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%;
transform-origin:50% 50%
}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle-fill {
-webkit-animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important;
animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important
}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle-fill {
-webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
opacity:0!important
}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone:hover .phonering-alo-ph-circle-fill {
background-color:rgba(39,45,107,0.5);
opacity:.75!important
}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle-fill {
background-color:rgba(39,45,107,0.5);
opacity:.75!important
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill {
background-color:rgba(0,175,242,0.5);
}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle-fill {
background-color:rgba(204,204,204,0.5);
opacity:.75!important
}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle-fill {
background-color:rgba(117,235,80,0.5);
opacity:.75!important
}
.phonering-alo-ph-img-circle {
width:60px;
height:60px;
top:70px;
left:70px;
position:absolute;
background:rgba(30,30,30,0.1) url(https://oneweb.com.vn/uploads/phone-icon.png) no-repeat center center;
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%
}

.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-img-circle {
-webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important;
animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-img-circle {
-webkit-animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important;
animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone:hover .phonering-alo-ph-img-circle {
background-color:#00aff2;
}

.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-img-circle {
background-color:#272d6b;
}

.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {
background-color:#00aff2;
}

.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-img-circle {
background-color:#ccc;
}

.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-img-circle {
background-color:#75eb50
}

@-webkit-keyframes phonering-alo-circle-anim {
0% {
-webkit-transform:rotate(0) scale(.5) skew(1deg);
-webkit-opacity:.1
}

30% {
-webkit-transform:rotate(0) scale(.7) skew(1deg);
-webkit-opacity:.5
}

100% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
-webkit-opacity:.1
}
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}

50% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
opacity:.2
}

100% {
-webkit-transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}
}

@-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)
}
}

@-webkit-keyframes phonering-alo-circle-anim {
0% {
-webkit-transform:rotate(0) scale(.5) skew(1deg);
transform:rotate(0) scale(.5) skew(1deg);
opacity:.1
}

30% {
-webkit-transform:rotate(0) scale(.7) skew(1deg);
transform:rotate(0) scale(.7) skew(1deg);
opacity:.5
}

100% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
transform:rotate(0) scale(1) skew(1deg);
opacity:.1
}
}

@keyframes phonering-alo-circle-anim {
0% {
-webkit-transform:rotate(0) scale(.5) skew(1deg);
transform:rotate(0) scale(.5) skew(1deg);
opacity:.1
}

30% {
-webkit-transform:rotate(0) scale(.7) skew(1deg);
transform:rotate(0) scale(.7) skew(1deg);
opacity:.5
}

100% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
transform:rotate(0) scale(1) skew(1deg);
opacity:.1
}
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform:rotate(0) scale(.7) skew(1deg);
transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}

50% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
transform:rotate(0) scale(1) skew(1deg);
opacity:.2
}

100% {
-webkit-transform:rotate(0) scale(.7) skew(1deg);
transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}
}

@keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform:rotate(0) scale(.7) skew(1deg);
transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}

50% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
transform:rotate(0) scale(1) skew(1deg);
opacity:.2
}

100% {
-webkit-transform:rotate(0) scale(.7) skew(1deg);
transform:rotate(0) scale(.7) skew(1deg);
opacity:.2
}
}

@-webkit-keyframes phonering-alo-circle-img-anim {
0% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
transform:rotate(0) scale(1) skew(1deg)
}

10% {
-webkit-transform:rotate(-25deg) scale(1) skew(1deg);
transform:rotate(-25deg) scale(1) skew(1deg)
}

20% {
-webkit-transform:rotate(25deg) scale(1) skew(1deg);
transform:rotate(25deg) scale(1) skew(1deg)
}

30% {
-webkit-transform:rotate(-25deg) scale(1) skew(1deg);
transform:rotate(-25deg) scale(1) skew(1deg)
}

40% {
-webkit-transform:rotate(25deg) scale(1) skew(1deg);
transform:rotate(25deg) scale(1) skew(1deg)
}

50% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
transform:rotate(0) scale(1) skew(1deg)
}

100% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
transform:rotate(0) scale(1) skew(1deg)
}
}

@keyframes phonering-alo-circle-img-anim {
0% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
transform:rotate(0) scale(1) skew(1deg)
}

10% {
-webkit-transform:rotate(-25deg) scale(1) skew(1deg);
transform:rotate(-25deg) scale(1) skew(1deg)
}

20% {
-webkit-transform:rotate(25deg) scale(1) skew(1deg);
transform:rotate(25deg) scale(1) skew(1deg)
}

30% {
-webkit-transform:rotate(-25deg) scale(1) skew(1deg);
transform:rotate(-25deg) scale(1) skew(1deg)
}

40% {
-webkit-transform:rotate(25deg) scale(1) skew(1deg);
transform:rotate(25deg) scale(1) skew(1deg)
}

50% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
transform:rotate(0) scale(1) skew(1deg)
}

100% {
-webkit-transform:rotate(0) scale(1) skew(1deg);
transform:rotate(0) scale(1) skew(1deg)
}
}

/* Kết thúc đoạn CSS HOTLINE */
</style>

ĐOẠN CODE HTML CHO NÚT GỌI

<!– Mở đầu đoạn HTML –>

<div class=”hotline”>
<div id=”phonering-alo-phoneIcon” class=”phonering-alo-phone phonering-alo-green phonering-alo-show”>
<div class=”phonering-alo-ph-circle”></div>
<div class=”phonering-alo-ph-circle-fill”></div>
<div class=”phonering-alo-ph-img-circle”>
<a class=”pps-btn-img ” title=”Liên hệ” href=”tel:0968 197 479″> <img src=”https://oneweb.com.vn/uploads/v8TniL3.png” alt=”Liên hệ” width=”50″ class=”img-responsive”/> </a>
</div>
</div>
</div>

<!– Kết thúc đoạn HTML –>

Trả lời

Chúng tôi hỗ trợ khách hàng 7 ngày trong tuần với hotline

Với đội ngũ nhân viên hơn 8 năm kinh nghiệm, không chỉ thiết kế website, hỗ trợ, hướng dẫn và xử lý các vấn đề từ website

Hotline: 090 1100 989
Zalo: 090 1100 989