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

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *