-->
Chia sẻ code nút call và phone number hiệu ứng cực đỉnh hoàn toàn bằng css

Chia sẻ code nút call và phone number hiệu ứng cực đỉnh hoàn toàn bằng css

Chào các bạn, hôm nay mình sẻ đến các bạn code của nút call và phone number cực đỉnh hoàn toàn bằng css, rất thích hợp để sử dụng ở các blog, trang web bán hàng hoặc làm dịch vụ...

Chia sẻ code nút call và phone number hiệu ứng cực đỉnh hoàn toàn bằng css

Chia sẻ thật với các bạn là code này mình lấy bên blog của anh Huỳnh Phụng (toilaquantri.com) nhưng không thấy anh ấy sử dụng nữa nên mình đem share cho các bạn.

Xem Demo Ngay

Các bạn sử dụng như sau: Coppy toàn bộ code phía dưới và dán lên trên thẻ đóng /body
Sau đó sửa thông tin số điện thoại của mình lại là được rồi.
<div class='hotline'>
<div class='phonering-alo-phone phonering-alo-green phonering-alo-show' id='phonering-alo-phoneIcon'>
<div class='phonering-alo-ph-circle'/>
<div class='phonering-alo-ph-circle-fill'/>
<div class='phonering-alo-ph-img-circle'>
<a class='pps-btn-img ' href='tel:0984.541.045' title='Liên hệ'>
<img alt='Liên hệ' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yjcyKTYOwH2GGGkmxGXJr7Sn97y3pt4xNqZ5vYrCSKHSD0dAa3B-oElSmuenMNCc1k_S4P5b7Y0bV_ff33YtJcr2IcH2Lgt7IY3jjGnatqOjq95QfP1XGSQsArj8OPR_HjsXJRl6nRSc/s1600/v8TniL3.png' width='50'/>
</a>
</div>
</div>
</div>
<style>
#call {    display: block;
    position: fixed;
    bottom: 15px;
    left: 45px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #e51218;
    color: #fff;
    cursor: pointer;
    padding: 7px 20px 7px 30px;
    border-radius: 0 32px;
    font-weight: 700;
    font-size: 18px;
}
/* HOTLINE */
.phonering-alo-phone {position:fixed;visibility:hidden;background-color:transparent;width:200px;height:200px;
 cursor:pointer;z-index:200000!important;right:150px;bottom:-60px;left:-75px;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:140px;height:140px;top:35px;left:35px;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:red;
    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:#5ca038;
    opacity:.5
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {
    border-color:red;
    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:80px;height:80px;top:65px;left:65px;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:50px;
    height:50px;
    top:80px;
    left:80px;
    position:absolute;
    background:rgba(30,30,30,0.1) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) 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:red;
}
.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:#5ca038;
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {
    background-color:red;
}
.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)
    }
}
</style>
<a href='tel:0984541045' id='call'> 0984.541.045</a>
Ưu điểm của nó là hoàn toàn bằng css nên các bạn không phải lo ngại gì về vấn đề load nhé! Chúc các bạn thành công! Thank for watching!
Đăng bởi:
Cập nhật:
Chuyên mục: , ,
  1. Trần Quang Huy09/03/2019, 11:36

    sao a không làm đẹp lại html vs css nhìn cho đẹp. Góp chung lại e thấy hơi rối mắt quá a :)

    ReplyDelete
    Replies
    1. Thìn DZ09/03/2019, 12:47

      Tôi thì tách ra cái họ bảo gom lại cho gọn 😂😂

      Delete
    2. NIỆM STYLE BLOGGER09/03/2019, 13:32

      chủ yếu e tìm cái sđt e sửa thôi, cần gì quan tâm cái kia, gom lại cho gọn mà em :))

      Delete
  2. Võ Hữu Nhân09/03/2019, 12:20

    Đẹp lắm cơ mà Làm đẹp css đi anh :v

    ReplyDelete
    Replies
    1. NIỆM STYLE BLOGGER09/03/2019, 13:32

      code đó do mặc định của khung chứa code nó gom lại đấy, cơ bản nó đã đẹp rồi :v

      Delete
    2. Võ Hữu Nhân09/03/2019, 16:26

      Cái khung code của anh lạ nhỉ lúc nó chưa load xong thì thấy code đẹp vl ra, load xong thì nhìn như
      1 đống hỗn độn ý :v

      Delete
    3. NIỆM STYLE BLOGGER11/03/2019, 10:44

      code đó Bình nó làm cho a, a ko biết đâu mà mò nữa nên để đại v luôn.

      Delete
  3. Thìn DZ09/03/2019, 12:48

    Đẹp đó anh a sử dụng màu gradient cho đẹp anh 😂

    ReplyDelete
  4. Deva Designer Blog09/03/2019, 22:34

    em thích sự gọn gàng

    ReplyDelete
  5. Trần Nhật Sinh10/03/2019, 13:57

    Gọn nhẹ

    ReplyDelete
  6. Quốc Bảo Blog10/03/2019, 14:19

    đơn giản thôi em thích kkk.

    ReplyDelete
  7. Trần Thanh Bình11/03/2019, 19:08

    Qua dinh

    ReplyDelete
  8. Trần Quốc Thắng11/03/2019, 19:08

    đẹp á anh :vv

    ReplyDelete
  9. VSM.VN12/03/2019, 15:02

    Code hơi dài e dùng đt copy 1 lần ko hết dc 😩

    ReplyDelete
  10. Võ Hữu Nhân14/03/2019, 11:51

    Qua buff cmt

    ReplyDelete
    Replies
    1. NIỆM STYLE BLOGGER14/03/2019, 13:13

      gần 4k comment :v

      Delete
    2. Võ Hữu Nhân14/03/2019, 13:23

      Bài mới đi anh ~~ trước f5 phát có bài rồi sao dạo này vắng thế :v

      Delete
    3. NIỆM STYLE BLOGGER14/03/2019, 13:51

      tào lao, viết 1 bài phải suy nghĩ rất lâu, phải chắc chiêu cái tốt nhất cho đọc giả e à :v

      Delete
    4. Võ Hữu Nhân14/03/2019, 14:52

      Mở tuyển ctv đi :v em xin 1 slot

      Delete
    5. NIỆM STYLE BLOGGER14/03/2019, 15:00

      e để dành viết ở blog e đi, a có chiến lượt riêng của mình :v

      Delete
    6. Võ Hữu Nhân14/03/2019, 16:41

      Báo trước là mỗi ngày em spam 5-20 cmt đấy :v hóng 4.000 cmt

      Delete
    7. NIỆM STYLE BLOGGER14/03/2019, 22:05

      Dạo này e rãnh rỗi quá nhỉ.

      Delete
    8. Võ Hữu Nhân15/03/2019, 07:12

      Khi bạn không có gì làm và phát hiện blog ông anh sắp đạt ngưỡng comment mới.

      Delete
  11. NTThanh ✔14/03/2019, 12:43

    hồi đó kiếm mấy code này ko ra, giờ ko cần thì nhiều blog share :V

    ReplyDelete
    Replies
    1. NIỆM STYLE BLOGGER14/03/2019, 13:13

      h mún thứ gì cũng có, blogger làm đc tất cả

      Delete
    2. Võ Hữu Nhân14/03/2019, 13:26

      Quay về 2014-2015 có cái template Bootstrap thôi là mừng hết lớn rồi ~~

      Delete
  12. Quốc Đẹp Trai06/05/2019, 10:37

    Nhìn chất quá anh kk

    ReplyDelete

Subscribe to: Post Comments (Atom)
Đăng ký bản tin

Đăng ký email để không bỏ lỡ những bài viết hay