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 (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 ở góc dưới bên trái màn hình.
    Chúc các bạn thành công.

    0 0 vote
    Article Rating

    NamLee Blog - Chia sẻ là đam mê
    Subscribe
    Notify of
    guest
    5 Comments
    Newest
    Oldest Most Voted
    Inline Feedbacks
    View all comments
    tri
    tri
    22/11/2023 12:36

    muốn nút call nằm bên phải thì fix ntn b

    tri
    tri
    Reply to  Nam Lee
    22/11/2023 13:42

    thank b nha

    quang Hà
    quang Hà
    30/04/2021 22:14

    sau 1 hồi thì cũng làm dc. cảm ơn AD nhé.

    5
    0
    Would love your thoughts, please comment.x
    ()
    x