Blogger alo phone ring button

    Here are some call buttons using css animation effects that I find nice to share to you. How to do it is very simple, you just go to edit template add css to ... </ b: skin>, then add html code before closing
    tag revise phone number is done

    Blogger alo phone ring button

    1. Sample 1

    blogger-alo-phone-ring-button-1

    Selecting some beautiful call buttons using css animation effects

    - View Demo: https://call-animation-css.blogspot.com/

    + Code Css
    .suntory-alo-phone{background-color:transparent;cursor:pointer;height:100px;position:fixed;left:0;bottom:0;transition:visibility 0.5s ease 0s;width:100px;z-index:200000!important}
    .suntory-alo-ph-circle{animation:1.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim;background-color:transparent;border:2px solid rgba(30,30,30,0.4);border-radius:100%;height:100px;left:0;opacity:0.1;position:absolute;top:0;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:100px}
    .suntory-alo-ph-circle-fill{animation:2.3s ease-in-out 0s normal none infinite running suntory-alo-circle-fill-anim;border:2px solid transparent;border-radius:100%;height:70px;left:15px;position:absolute;top:15px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:70px}
    .suntory-alo-ph-img-circle{border-radius:100%;height:50px;left:25px;opacity:1;position:absolute;top:25px;transform-origin:50% 50% 0;width:50px;border:3px solid #fff000}
    .suntory-alo-phone.suntory-alo-hover,.suntory-alo-phone:hover{opacity:1}
    .suntory-alo-phone.suntory-alo-active .suntory-alo-ph-circle{animation:1.1s ease-in-out 0s normal none infinite running suntory-alo-circle-anim!important}
    .suntory-alo-phone.suntory-alo-static .suntory-alo-ph-circle{animation:2.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim!important}
    .suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle,.suntory-alo-phone:hover .suntory-alo-ph-circle{border-color:#00aff2;opacity:0.5}
    .suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle{border-color:#f00;opacity:1}
    .suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle{border-color:#fff000;opacity:1}
    .suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-circle-fill,.suntory-alo-phone:hover .suntory-alo-ph-circle-fill{background-color:rgba(0,175,242,0.9)}
    .suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-circle-fill,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-circle-fill{background-color:#02A6E8}
    .suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle-fill{background-color:#02A6E8}
    .suntory-alo-phone.suntory-alo-hover .suntory-alo-ph-img-circle,.suntory-alo-phone:hover .suntory-alo-ph-img-circle{background-color:#00aff2}
    .suntory-alo-phone.suntory-alo-green.suntory-alo-hover .suntory-alo-ph-img-circle,.suntory-alo-phone.suntory-alo-green:hover .suntory-alo-ph-img-circle{background-color:#02A6E8}
    .suntory-alo-phone.suntory-alo-green .suntory-alo-ph-img-circle{background-color:#02A6E8}
    @keyframes suntory-alo-circle-anim{0%{opacity:0.1;transform:rotate(0deg) scale(0.5) skew(1deg)}30%{opacity:0.5;transform:rotate(0deg) scale(0.7) skew(1deg)}100%{opacity:0.6;transform:rotate(0deg) scale(1) skew(1deg)}}
    @keyframes suntory-alo-circle-img-anim{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 suntory-alo-circle-fill-anim{0%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}50%{opacity:0.2;transform:rotate(0deg) scale(1) skew(1deg)}100%{opacity:0.2;transform:rotate(0deg) scale(0.7) skew(1deg)}}
    .suntory-alo-ph-img-circle img{animation:1s ease-in-out 0s normal none infinite running suntory-alo-circle-img-anim;font-size:30px;line-height:39px;color:#fff;display:block;max-width:100%;height:auto}
    @keyframes suntory-alo-ring-ring{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)}}

    2. Sample 2

    blogger-alo-phone-ring-button-2

    + Code Css 
    .mypage-alo-phone{position:fixed;right:0;bottom:0;visibility:visible;background-color:transparent;width:110px;height:110px;cursor:pointer;z-index:200000!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,.4);opacity:.1;border-color:#00BBD2;opacity:.5}
    .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:#00bcd4;opacity:.75!important}
    .mypage-alo-ph-img-circle{width:50px;height:50px;top:33px;left:33px;position:absolute;background:rgba(30,30,30,.1) url(https://4.bp.blogspot.com/-Q0mmtfMrg3Y/XO6zLlEnhlI/AAAAAAAAQc8/e1qNMly6DY4YioZcqFJCA4oL2dfWWbBwQCLcBGAs/s1600/phone-icon.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:#00BBD2;background-size:70%}
    .animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
    .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
    .zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
    @-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
    @keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
    .pulse{-webkit-animation-name:pulse;animation-name:pulse}
    @-webkit-keyframes pulse{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)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
    @keyframes pulse{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)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
    .tada{-webkit-animation-name:tada;animation-name:tada}
    @-webkit-keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
    @keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

    No comments