Tạo nút liên hệ ngay cho blogspot với hiệu ứng css3 cực đẹp

Cộng tác viên 19:39 #Blogger #Thủ Thuật #Thủ Thuật Blogspot

Chào các bạn, hôm nay mình sẽ chia sẻ đến các bạn cách Tạo nút liên hệ ngay cho blogspot

với hiệu ứng css3 cực đẹp

DEMO

Đầu tiên các bạn vào Chủ đề >> Chỉnh sửa

Tiếp theo các bạn tìm đến thẻ <body> và dán đoạn code sau xuống phía dưới nó

<style>
.quick-alo-phone.quick-alo-static{opacity:.6}
.quick-alo-phone.quick-alo-hover,.quick-alo-phone:hover{opacity:1}
.quick-alo-ph-circle{width:160px;height:160px;top:20px;left:20px;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);border:2px solid #bfebfc 9;opacity:.1;-webkit-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;-moz-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;-ms-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;-o-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;animation:quick-alo-circle-anim 1.2s infinite ease-in-out;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle{-webkit-animation:quick-alo-circle-anim 1.1s infinite ease-in-out!important;-moz-animation:quick-alo-circle-anim 1.1s infinite ease-in-out!important;-ms-animation:quick-alo-circle-anim 1.1s infinite ease-in-out!important;-o-animation:quick-alo-circle-anim 1.1s infinite ease-in-out!important;animation:quick-alo-circle-anim 1.1s infinite ease-in-out!important}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle{-webkit-animation:quick-alo-circle-anim 2.2s infinite ease-in-out!important;-moz-animation:quick-alo-circle-anim 2.2s infinite ease-in-out!important;-ms-animation:quick-alo-circle-anim 2.2s infinite ease-in-out!important;-o-animation:quick-alo-circle-anim 2.2s infinite ease-in-out!important;animation:quick-alo-circle-anim 2.2s infinite ease-in-out!important}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle,.quick-alo-phone:hover .quick-alo-ph-circle{border-color:#19B5FE;opacity:.5}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle,.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle{border-color:#75eb50;border-color:#baf5a7 9;opacity:.5}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle{border-color:#19B5FE;border-color:#bfebfc 9;opacity:.5}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle,.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle{border-color:#ccc;opacity:.5}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle{border-color:#75eb50;opacity:.5}
.quick-alo-ph-circle-fill{width:100px;height:100px;top:50px;left:50px;position:absolute;background-color:#000;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:.1;-webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;-moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;-ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;-o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle-fill{-webkit-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out!important;-moz-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out!important;-ms-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out!important;-o-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out!important;animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out!important}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle-fill{-webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out!important;-moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out!important;-ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out!important;-o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out!important;animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out!important;opacity:0!important}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle-fill,.quick-alo-phone:hover .quick-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);background-color:#19B5FE 9;opacity:.75!important}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle-fill,.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle-fill{background-color:rgba(117,235,80,0.5);background-color:#baf5a7 9;opacity:.75!important}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);background-color:#a6e3fa 9;opacity:.75!important}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle-fill,.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle-fill{background-color:rgba(204,204,204,0.5);background-color:#ccc 9;opacity:.75!important}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle-fill{background-color:rgba(117,235,80,0.5);opacity:.75!important}
.quick-alo-ph-img-circle{width:60px;height:60px;top:70px;left:70px;position:absolute;background:rgba(30,30,30,0.1) url("http://i.imgur.com/YWJeVO2.png") no-repeat center center;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:.7;-webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;animation:quick-alo-circle-img-anim 1s infinite 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%}
.quick-alo-phone.quick-alo-active .quick-alo-ph-img-circle{-webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out!important;-moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out!important;-ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out!important;-o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out!important;animation:quick-alo-circle-img-anim 1s infinite ease-in-out!important}
.quick-alo-phone.quick-alo-static .quick-alo-ph-img-circle{-webkit-animation:quick-alo-circle-img-anim 0s infinite ease-in-out!important;-moz-animation:quick-alo-circle-img-anim 0s infinite ease-in-out!important;-ms-animation:quick-alo-circle-img-anim 0s infinite ease-in-out!important;-o-animation:quick-alo-circle-img-anim 0s infinite ease-in-out!important;animation:quick-alo-circle-img-anim 0s infinite ease-in-out!important}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-img-circle,.quick-alo-phone:hover .quick-alo-ph-img-circle{background-color:#19B5FE}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-img-circle,.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle{background-color:#75eb50;background-color:#75eb50 9}
.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle{background-color:#19B5FE;background-color:#19B5FE 9}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-img-circle,.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-img-circle{background-color:#ccc}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-img-circle{background-color:#75eb50}
@-moz-keyframes quick-alo-circle-anim{
0%{-moz-transform:rotate(0) scale(.5) skew(1deg);opacity:.1;-moz-opacity:.1;-webkit-opacity:.1;-o-opacity:.1}
30%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.5;-moz-opacity:.5;-webkit-opacity:.5;-o-opacity:.5}
100%{-moz-transform:rotate(0) scale(1) skew(1deg);opacity:.6;-moz-opacity:.6;-webkit-opacity:.6;-o-opacity:.1}
}
@-webkit-keyframes quick-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}
}
@-o-keyframes quick-alo-circle-anim{
0%{-o-transform:rotate(0) kscale(.5) skew(1deg);-o-opacity:.1}
30%{-o-transform:rotate(0) scale(.7) skew(1deg);-o-opacity:.5}
100%{-o-transform:rotate(0) scale(1) skew(1deg);-o-opacity:.1}
}
@-moz-keyframes quick-alo-circle-fill-anim{
0%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
50%{-moz-transform:rotate(0) -moz-scale(1) skew(1deg);opacity:.2}
100%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
}
@-webkit-keyframes quick-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}
}
@-o-keyframes quick-alo-circle-fill-anim{
0%{-o-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
50%{-o-transform:rotate(0) scale(1) skew(1deg);opacity:.2}
100%{-o-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
}
@-moz-keyframes quick-alo-circle-img-anim{
0%{transform:rotate(0) scale(1) skew(1deg)}
10%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}
20%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}
30%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}
40%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}
50%{-moz-transform:rotate(0) scale(1) skew(1deg)}
100%{-moz-transform:rotate(0) scale(1) skew(1deg)}
}
@-webkit-keyframes quick-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)}
}
@-o-keyframes quick-alo-circle-img-anim{
0%{-o-transform:rotate(0) scale(1) skew(1deg)}
10%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}
20%{-o-transform:rotate(25deg) scale(1) skew(1deg)}
30%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}
40%{-o-transform:rotate(25deg) scale(1) skew(1deg)}
50%{-o-transform:rotate(0) scale(1) skew(1deg)}
100%{-o-transform:rotate(0) scale(1) skew(1deg)}
}
.quick-alo-phone{position:fixed;background-color:transparent;width:200px;height:200px;cursor:pointer;z-index:200000!important;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transition:visibility .5s;-moz-transition:visibility .5s;-o-transition:visibility .5s;transition:visibility .5s;right:150px;top:30px}
</style>


<br />
<div class="quick-alo-phone quick-alo-green quick-alo-show" id="quick-alo-phoneIcon" style="right: 10px; top: 20%;">
<a href="tel:+841239738097" title="Liên hệ ngay">
</a><br />
<div class="quick-alo-ph-circle">
</div>
<a href="tel:+841239738097" title="Liên hệ ngay">
<div class="quick-alo-ph-circle-fill">
</div>
<div class="quick-alo-ph-img-circle">
</div>
</a>
</div>