Dịch vụ thiết kế tool reup blogger wordpress

Một số tiện ích liên hệ đẹp để chèn vào website

Một số tiện ích liên hệ đẹp để chèn vào website

Cập nhật ngày Bởi
Một số tiện ích liên hệ đẹp để chèn vào website Ở bài viết trước mình đã chia sẻ Tổng hợp các loại nút liên hệ đẹp cho blogspot, đó là các button dạng từ 1 nút click vào sẽ mở ra nhiều nút liên hệ khác, tuy nhiên ở bài viết này, mình sẽ giới thiệu cho mọi người một số các loại button liên hệ đơn lẻ có hiệu ứng để mọi người có thể chèn vào.

Button call với hiệu ứng rung

Button call với hiệu ứng rung
<style>
.hotline-phone-ring-wrap{position:fixed;bottom:0;left:0;z-index:999999}
.hotline-phone-ring{position:relative;visibility:visible;background-color:transparent;width:110px;height:110px;cursor:pointer;z-index:11;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transition:visibility .5s;left:0;bottom:0;display:block}
.hotline-phone-ring-circle{width:87px;height:87px;top:10px;left:10px;position:absolute;background-color:transparent;border-radius:100%;border:2px solid #e60808;-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%;opacity:0.5}
.hotline-phone-ring-circle-fill{width:57px;height:57px;top:25px;left:25px;position:absolute;background-color:rgba(230,8,8,0.7);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%}
.hotline-phone-ring-img-circle{background-color:#e60808;width:33px;height:33px;top:37px;left:37px;position:absolute;background-size:20px;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%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;justify-content:center}
.hotline-phone-ring-img-circle .pps-btn-i{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
.hotline-bar{position:absolute;background:rgba(230,8,8,0.75);height:40px;width:180px;line-height:40px;border-radius:3px;padding:0 10px;background-size:100%;cursor:pointer;transition:all 0.8s;-webkit-transition:all 0.8s;z-index:9;box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.1);border-radius:50px!important;/* width:175px!important;*/
  left:33px;bottom:37px}
.hotline-bar > a{color:#fff;text-decoration:none;font-size:15px;font-weight:bold;text-indent:50px;display:block;letter-spacing:1px;line-height:40px;font-family:Arial}
.hotline-bar > a:hover,.hotline-bar > a:active{color:#fff}
@-webkit-keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(0.5) skew(1deg);-webkit-opacity:0.1}30%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);-webkit-opacity:0.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:0.1}}
@-webkit-keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);opacity:0.6}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:0.6}100%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);opacity:0.6}}
@-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)}}
@media (max-width:768px){.hotline-bar{display:none}}
</style>

<div class='hotline-phone-ring-wrap'>
<div class='hotline-phone-ring'>
<div class='hotline-phone-ring-circle'></div>
<div class='hotline-phone-ring-circle-fill'></div>
<div class='hotline-phone-ring-img-circle'>
<a class='pps-btn-i' href='tel:0911518538'><img src='https://1.bp.blogspot.com/--OCZvbZrZ0g/XxT-mLLFcAI/AAAAAAAALHI/JnQ08f9qwpAux6YBCDqNl-kbBJcxwNcHACLcBGAsYHQ/s1600/icon-call-nh.png' width='50'/></a>
</div>
</div>
<div class='hotline-bar'>
<a href='tel:0911518538'><span class='text-hotline'>0911 518 538</span></a>
</div>
</div>

Button zalo với hiệu ứng pulse

Button zalo với hiệu ứng
<style>
.zalo-container{position:fixed;width:40px;height:40px;bottom:40px;z-index:9999999}
.zalo-container:not(.right){left:2.5rem}
.zalo-container.right{right:2.5rem}
.zalo-container a{display:block}
.zalo-container span{display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-ms-align-items:center;align-items:center;width:40px;height:40px;border-radius:50%;background:#1182FC;position:relative}
@keyframes zoomIn_zalo{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.zoomIn_zalo{animation-name:zoomIn_zalo}
.animated_zalo{animation-duration:1s;animation-fill-mode:both}
.animated_zalo.infinite{animation-iteration-count:infinite}
.cmoz-alo-circle{width:50px;height:50px;top:-5px;right:-5px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(17,130,252,.8);opacity:.1;border-color:#1182FC;opacity:.5}
.cmoz-alo-circle-fill{width:60px;height:60px;top:-10px;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(17,130,252,0.45);opacity:.75;right:-10px}
@-webkit-keyframes pulse_zalo{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes pulse_zalo{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.pulse_zalo{-webkit-animation-name:pulse_zalo;animation-name:pulse_zalo}
</style>

<div class='zalo-container right'>
<a href='https://zalo.me/0911518538' id='zalo-btn' rel='noopener noreferrer nofollow' target='_blank'>
<div class='animated_zalo infinite zoomIn_zalo cmoz-alo-circle'></div>
<div class='animated_zalo infinite pulse_zalo cmoz-alo-circle-fill'></div>
<span><img alt='Contact Me on Zalo' src='https://1.bp.blogspot.com/-5Kwe_T6RC4E/XzYbxjnZ_yI/AAAAAAAACsE/EvxW7Nw1-RYSHyqG7jC_uLHWArwr3iYOQCLcBGAsYHQ/s640/zalo.png'/></span>
</a>
</div>

Bộ 3 nút call - zalo - messenger hiệu ứng rung

3 nút này sẽ nằm dọc trên pc và nằm ngang trên mobile nhé

Bộ 3 nút call - zalo - messenger hiệu ứng rung
<style>#FOLLOW-ICON{max-width:60px;position:fixed;z-index:9;left:10px;bottom:0}
#FOLLOW-ICON > li{width:100%;margin:30px 0}
.an{display:none}
.anPC{display:none}
@media (max-width:480px){.anPC{display:block}.anMB{display:none}#FOLLOW-ICON{max-width:100%}#FOLLOW-ICON > li{width:fit-content;float:right;margin:0 3px}}
:root{--phone:rgb(210,19,14);--phoneopa:rgb(210,19,14,0.5);--facebook:rgb(59,89,152);--facebookopa:rgb(59,89,152,0.5);--mail:rgb(223,75,56);--mailopa:rgb(223,75,56,0.5);--zalo:rgb(2,143,227);--zaloopa:rgb(2,143,227,0.5);--messenger:rgb(2,143,227);--messengeropa:rgb(2,143,227,0.5)}
#phone a{background:var(--phone);border:2px #fff solid}
#phone svg path{fill:#fff}
#phone .alo-circle-fill{background-color:var(--phoneopa)}
#phone .alo-circle{border-color:var(--phone)}
#phone:hover a{background:rgb(255,87,34)}
#phone:hover svg path{fill:#fff}
#phone:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5)}
#phone:hover .alo-circle{border-color:rgb(255,87,34)}
#facebook a{background:var(--facebook);border:2px #fff solid}
#facebook svg path{fill:rgb(255,255,255)}
#facebook .alo-circle-fill{background-color:var(--facebookopa)}
#facebook .alo-circle{border-color:var(--facebook)}
#facebook:hover a{background:rgb(255,87,34)}
#facebook:hover svg path{fill:#fff}
#facebook:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5)}
#facebook:hover .alo-circle{border-color:rgb(255,87,34)}
#mail a{background:var(--mail);border:2px #fff solid}
#mail svg path{fill:rgb(255,255,255)}
#mail .alo-circle-fill{background-color:var(--mailopa)}
#mail .alo-circle{border-color:var(--mail)}
#mail:hover a{background:rgb(255,87,34)}
#mail:hover svg path{fill:#fff}
#mail:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5)}
#mail:hover .alo-circle{border-color:rgb(255,87,34)}
#zalo svg{background:#fff;padding:1px}
#zalo svg path{fill:var(--zalo)}
#zalo .alo-circle-fill{background-color:var(--zaloopa)}
#zalo .alo-circle{border-color:var(--zalo)}
#zalo:hover svg{background:#fff}
#zalo:hover svg path{fill:rgb(255,87,34)}
#zalo:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5)}
#zalo:hover .alo-circle{border-color:rgb(255,87,34)}
#messenger svg{background:#fff;padding:1px}
#messenger svg path:first-child{fill:var(--messenger)}
#messenger .alo-circle-fill{background-color:var(--messengeropa)}
#messenger .alo-circle{border-color:var(--messenger)}
#messenger:hover svg{background:#fff}
#messenger:hover svg path:first-child{fill:rgb(255,87,34)}
#messenger:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5)}
#messenger:hover .alo-circle{border-color:rgb(255,87,34)}
.support-online.type-01 a{display:block}
.support-online.type-02 a{display:flex;border-radius:100%;align-items:center;justify-content:center}
.support-online.type-01 svg{width:40px;height:40px;border-radius:100%}
.support-online.type-02 svg{width:25px;height:25px}
.support-online{}
.support-online a{position:relative;text-align:left;margin:10px;width:40px;height:40px}
.support-online svg{text-align:center;line-height:1.9;position:relative;z-index:9;animation:1s ease-in-out 0s normal none infinite running Icon-running}
.alo-circle-fill{width:60px;height:60px;top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .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;opacity:.75}
.alo-circle{width:50px;height:50px;top:50%;left:50%;transform:translate(-50%,-50%);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:.5}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
@-moz-keyframes Grow{0%{transform:scale(.1);-ms-transform:scale(.1);-webkit-transform:scale(.1);opacity:0;filter:alpha(opacity=0)}50%{opacity:1;filter:alpha(opacity=100)}to{transform:scale(1.8);-ms-transform:scale(1.8);-webkit-transform:scale(1.8);opacity:0;filter:alpha(opacity=0)}}
@keyframes Grow{0%{transform:scale(.1);-ms-transform:scale(.1);-webkit-transform:scale(.1);opacity:0;filter:alpha(opacity=0)}50%{opacity:1;filter:alpha(opacity=100)}to{transform:scale(1.8);-ms-transform:scale(1.8);-webkit-transform:scale(1.8);opacity:0;filter:alpha(opacity=0)}}
@keyframes Icon-running{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}
@keyframes zoomIn{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale3d(.3,.3,.3);-ms-transform:translate(-50%,-50%) scale3d(.3,.3,.3);transform:translate(-50%,-50%) scale3d(.3,.3,.3)}50%{opacity:1}}
@keyframes pulse{0%,100%{-webkit-transform:scale(1);transform:translate(-50%,-50%) scale(1);opacity:1}50%{-webkit-transform:scale(.9);transform:translate(-50%,-50%) scale(.9);opacity:.7}}
</style>

<ul id="FOLLOW-ICON">

   <li class="support-online type-02" id="phone">
      <a href="tel:0868450305" target="_blank">
         <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-phone-alt fa-w-16">
            <path fill="currentColor" d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z" class=""></path>
         </svg>
         <div class="animated infinite zoomIn alo-circle"></div>
         <div class="animated infinite pulse alo-circle-fill"></div>
      </a>
   </li>

   <li class="support-online type-01" id="zalo">
      <a href="https://zalo.me/0868450305" target="_blank">
         <svg id="svg_zalo_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 614.501 613.667" xml:space="preserve">
            <path d="M464.721,301.399c-13.984-0.014-23.707,11.478-23.944,28.312c-0.251,17.771,9.168,29.208,24.037,29.202   c14.287-0.007,23.799-11.095,24.01-27.995C489.028,313.536,479.127,301.399,464.721,301.399z"></path>
            <path d="M291.83,301.392c-14.473-0.316-24.578,11.603-24.604,29.024c-0.02,16.959,9.294,28.259,23.496,28.502   c15.072,0.251,24.592-10.87,24.539-28.707C315.214,313.318,305.769,301.696,291.83,301.392z"></path>
            <path d="M310.518,3.158C143.102,3.158,7.375,138.884,7.375,306.3s135.727,303.142,303.143,303.142   c167.415,0,303.143-135.727,303.143-303.142S477.933,3.158,310.518,3.158z M217.858,391.083   c-33.364,0.818-66.828,1.353-100.133-0.343c-21.326-1.095-27.652-18.647-14.248-36.583c21.55-28.826,43.886-57.065,65.792-85.621   c2.546-3.305,6.214-5.996,7.15-12.705c-16.609,0-32.784,0.04-48.958-0.013c-19.195-0.066-28.278-5.805-28.14-17.652   c0.132-11.768,9.175-17.329,28.397-17.348c25.159-0.026,50.324-0.06,75.476,0.026c9.637,0.033,19.604,0.105,25.304,9.789   c6.22,10.561,0.284,19.512-5.646,27.454c-21.26,28.497-43.015,56.624-64.559,84.902c-2.599,3.41-5.119,6.88-9.453,12.725   c23.424,0,44.123-0.053,64.816,0.026c8.674,0.026,16.662,1.873,19.941,11.267C237.892,379.329,231.368,390.752,217.858,391.083z    M350.854,330.211c0,13.417-0.093,26.841,0.039,40.265c0.073,7.599-2.599,13.647-9.512,17.084   c-7.296,3.642-14.71,3.028-20.304-2.968c-3.997-4.281-6.214-3.213-10.488-0.422c-17.955,11.728-39.908,9.96-56.597-3.866   c-29.928-24.789-30.026-74.803-0.211-99.776c16.194-13.562,39.592-15.462,56.709-4.143c3.951,2.619,6.201,4.815,10.396-0.053   c5.39-6.267,13.055-6.761,20.271-3.357c7.454,3.509,9.935,10.165,9.776,18.265C350.67,304.222,350.86,317.217,350.854,330.211z    M395.617,369.579c-0.118,12.837-6.398,19.783-17.196,19.908c-10.779,0.132-17.593-6.966-17.646-19.512   c-0.179-43.352-0.185-86.696,0.007-130.041c0.059-12.256,7.302-19.921,17.896-19.222c11.425,0.752,16.992,7.448,16.992,18.833   c0,22.104,0,44.216,0,66.327C395.677,327.105,395.828,348.345,395.617,369.579z M463.981,391.868   c-34.399-0.336-59.037-26.444-58.786-62.289c0.251-35.66,25.304-60.713,60.383-60.396c34.631,0.304,59.374,26.306,58.998,61.986   C524.207,366.492,498.534,392.205,463.981,391.868z"></path>
         </svg>
         <div class="animated infinite zoomIn alo-circle"></div>
         <div class="animated infinite pulse alo-circle-fill"></div>
      </a>
   </li>

   <li class="support-online  type-01" id="messenger">
      <a href="https://www.facebook.com/mkhoi2001" target="_blank">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="Layer_1" x="0px" y="0px" viewBox="0 0 614.5 613.667" enable-background="new 0 0 614.5 613.667" xml:space="preserve">
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#1E88E3" d="M307.493,3.136c164.628-0.713,305.026,133.85,302.952,307.063  C608.437,478.015,470.68,611.096,304.02,609.454C140.529,607.842,2.228,474.676,4.049,302.738  C5.839,133.767,144.104,2.26,307.493,3.136z M90.685,401.72c2.587,0.639,4.184-0.253,5.755-1.114  c13.712-7.508,27.413-15.035,41.12-22.552c37.04-20.315,74.075-40.638,111.127-60.931c7.36-4.032,8.957-3.855,13.919,1.462  c24.762,26.528,49.517,53.063,74.237,79.631c6.357,6.832,7.212,6.854,13.634,0.008c20.273-21.611,40.558-43.215,60.878-64.782  c36.646-38.893,73.324-77.756,109.977-116.643c1.105-1.173,3.13-2.661,2-4.082c-1.289-1.62-3.375-0.171-4.958,0.709  c-49.592,27.541-99.176,55.098-148.766,82.643c-6.145,3.412-7.596,3.147-12.506-1.997c-25.404-26.618-50.811-53.233-76.223-79.843  c-6.643-6.955-7.342-6.886-14.071,0.266c-50.881,54.071-101.784,108.122-152.674,162.187  C106.398,384.899,98.703,393.156,90.685,401.72z"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#FDFDFE" d="M90.685,401.72c8.019-8.564,15.714-16.821,23.449-25.039  c50.89-54.064,101.793-108.115,152.674-162.187c6.73-7.151,7.429-7.221,14.071-0.266c25.412,26.61,50.818,53.225,76.223,79.843  c4.91,5.145,6.361,5.409,12.506,1.997c49.59-27.545,99.174-55.101,148.766-82.643c1.583-0.879,3.669-2.329,4.958-0.709  c1.13,1.42-0.895,2.909-2,4.082c-36.652,38.886-73.331,77.75-109.977,116.643c-20.32,21.567-40.604,43.171-60.878,64.782  c-6.422,6.846-7.276,6.824-13.634-0.008c-24.721-26.567-49.476-53.102-74.237-79.631c-4.962-5.317-6.559-5.494-13.919-1.462  c-37.052,20.293-74.087,40.616-111.127,60.931c-13.707,7.517-27.408,15.044-41.12,22.552  C94.868,401.467,93.271,402.359,90.685,401.72z"></path>
         </svg>
         <div class="animated infinite zoomIn alo-circle"></div>
         <div class="animated infinite pulse alo-circle-fill"></div>
      </a>
   </li>

</ul>

Button liên hệ ở góc phải

<style>
.tempFixed .itemFixed{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;position:fixed;bottom:10px;right:10px;z-index:10}
.tempFixed .itemFixed *{box-sizing:border-box}
.tempFixed .itemFixed.hotLine{height:50px;width:210px;background:#424242;right:0;bottom:0}
.tempFixed .itemFixed.hotLine label{display:block;position:relative;height:50px}
.tempFixed .itemFixed.hotLine label a > span{margin:0 5px 0 -25px;display:inline-block;vertical-align:middle;width:50px;height:50px;background:url('https://1.bp.blogspot.com/-osOjnWN8riE/X9sqAUVfiyI/AAAAAAAABLs/pvqZ97egTrs6sFchwvJ4EeMJD3UvwFxpACLcBGAsYHQ/s0/phone.webp') top left no-repeat}
.tempFixed .itemFixed.hotLine label p{display:inline-block;vertical-align:middle;color:#fff;font-size:13px;margin:0;font-weight:normal;height:50px}
.tempFixed .itemFixed.hotLine label i{z-index:1;position:absolute;top:14px;right:10px;display:inline-block;width:21px;height:21px;background:url('https://1.bp.blogspot.com/-EMrTtY9lQKI/X9sqM2-JdBI/AAAAAAAABL0/wSD7hScMYrgD2W8PPH4Krw3upEa11YMxACLcBGAsYHQ/s0/close_w.webp') no-repeat;cursor:pointer}
</style>
<div class='tempFixed adr'>
<div class='itemFixed hotLine'>
  <label>
    <a href='tel:0868.450.305' title='Hotline'>
      <span></span>
      <p>Tư vấn miễn phí(24/7)<br/>
        <span>0868.450.305</span></p>
    </a>
    <i></i>
  </label>
</div>
</div>
<script>//<![CDATA[
jQuery(".tempFixed .itemFixed.hotLine label i").click(function(){$(this).parents(".hotLine").fadeOut(500)})
//]]></script>

Tiện ích liên hệ đơn giản x4

Button liên hệ
<style>
@keyframes ani-zalo{0%{opacity:1;width:100%;height:100%;top:0;left:0}100%{opacity:0;width:calc(100% + 30px);height:calc(100% + 30px);top:-15px;left:-15px}}
#btn-zalo:before{content:"";position:absolute;z-index:-1;height:calc(100% + 30px);width:calc(100% + 30px);top:-15px;left:-15px;display:block;background:#0065be;border-radius:50%;opacity:0.8;animation-name:ani-zalo;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate}
.btn-contact{position:fixed;border-radius:50%;height:50px;width:50px;display:block;box-shadow:5px 7px 15px 0 rgba(0,0,0,0.3);right:50px}
#btn-zalo{bottom:120px;right:50px}
#btn-call-phone{bottom:180px}
#btn-sms{bottom:240px}
#btn-message{bottom:300px}
.btn-contact img{width:100%;height:100%;margin:0;border-radius:50%}
</style>
<a class='btn-contact' href='http://m.me/hoablogger/' id='btn-message' target='_blank'>
  <img alt='message' src='https://1.bp.blogspot.com/-lWaZP6kRfso/YML4CNiMWTI/AAAAAAAATBs/MzSpDojrh9oS3FTVR6jZhb3deQbR9jEGACLcBGAsYHQ/s0/messenger.png' />
</a>
<a class='btn-contact' href='sms:+0971539681' id='btn-sms' target='_blank'>
  <img alt='sms' src='https://1.bp.blogspot.com/-90k6Ze79aKM/YML4CA1WkuI/AAAAAAAATBw/oWYya3EHDosa-vMLH1XQRomPdKiaub6awCLcBGAsYHQ/s0/sms.png' />
</a>
<a class='btn-contact' href='tel:+0971539681' id='btn-call-phone' target='_blank'>
  <img alt='phone' src='https://1.bp.blogspot.com/-bCTDeHcrDnE/YML4B_9dbhI/AAAAAAAATBo/etw2VxCiaJ0J-lOz9CZaKRqAdr7PT128ACLcBGAsYHQ/s0/phone.png' />
</a>
<a class='btn-contact' href='https://zalo.me/0971539681' id='btn-zalo' target='_blank'>
  <img alt='zalo' src='https://1.bp.blogspot.com/-b55NjoNuia4/YML4Cl_sqNI/AAAAAAAATB0/4utYhCk27yM7UGGKkv3knSleqP3FEMuXgCLcBGAsYHQ/s0/zalo.png' />
</a>


Bài viết sẽ liên tục được cập nhật ...

Nhận xét

×