Button Right Css

 Link: https://bkhost.vn/blog/503-service-unavailable/

## HTML

<div id="ppoLeadCTA">

  <div class="ppo-cta-action go-top-action" style="margin-left: 0px;">

    <span class="ppo-cta-action-text">Trượt lên đầu trang</span>

  </div>

  <div class="ppo-cta-action vote-action" style="display:none;">

    <span class="ppo-cta-action-text">Góp ý</span>

  </div>

  <a class="ppo-cta-action call-action" href="tel:1800646881">

    <div class="ppo-cta-action-text">

      <span>Miễn phí cước gọi</span>

    </div>

  </a>

  <div class="ppo-cta-action zalo-action">

    <a rel="nofollow" href="https://zalo.me/4495444506979829893" class="ppo-cta-action-text" target="_blank">

      <span>Chat ngay qua Zalo</span>

    </a>

  </div>

  <div class="ppo-cta-action messenger-action" data-fbid="537054273164643">

    <a rel="nofollow" href="https://fb.com/msg/537054273164643" class="ppo-cta-action-text" target="_blank">

      <span>Chat ngay qua Messenger</span>

    </a>

  </div>

  <a class="ppo-cta-action feedback-action" data-toggle="modal" data-target="#feedbackModal" style="display:none;">

    <div class="ppo-cta-action-text">

      <span>Góp ý cho chúng tôi</span>

    </div>

  </a>

  <span class="toggle">

    <ul>

      <li style="opacity: 0; transform: translateY(-50px);">

        <i class="fa fa-commenting-o" aria-hidden="true"></i>

      </li>

      <li style="opacity: 0; transform: translateY(-50px);">

        <i class="fa fa-envelope-o" aria-hidden="true"></i>

      </li>

      <li style="opacity: 0; transform: translateY(-50px);">

        <i class="fa fa-phone" aria-hidden="true"></i>

      </li>

      <li style="opacity: 1; transform: translateY(0px);">

        <i class="fa fa-map-marker" aria-hidden="true"></i>

      </li>

    </ul>

  </span>

  <div class="pulsation"></div>

  <div class="pulsation"></div>

</div>

####JS

jQuery("#ppoLeadCTA .ppo-cta-action").hover(function(){jQuery(this).css("margin-left","-"+jQuery(this).find(".ppo-cta-action-text").outerWidth()+"px")},function(){jQuery(this).css("margin-left","0px")}),jQuery("#ppoLeadCTA .toggle").click(function(){jQuery("#ppoLeadCTA .ppo-cta-action").hasClass("open")?jQuery("#ppoLeadCTA .ppo-cta-action").removeClass("open"):jQuery("#ppoLeadCTA .ppo-cta-action").addClass("open")});var t=document.querySelectorAll("#ppoLeadCTA .toggle li"),r=0;if(function e(){t[r].style.opacity=0,t[r].style.transform="translateY(-50px)",r=(r+1)%t.length,t[r].style.opacity=1,t[r].style.transform="translateY(0)",setTimeout(e,2e3)}()

## CSS

#ppoLeadCTA {

    position: fixed;

    right: 0;

    bottom: 100px;

    z-index: 999;

}

#ppoLeadCTA .ppo-cta-action {

    width: 50px;

    height: 50px;

    background-repeat: no-repeat;

    background-size: 100%;

    cursor: pointer;

    margin-bottom: 5px;

    transition: margin-left .5s ease;

    border-top-left-radius: 6px;

    border-bottom-left-radius: 6px;

    display: none;

}

#ppoLeadCTA .go-top-action {

    background-image: url(//bkhost.vn/wp-content/themes/bkhost/assets/css/../images/footer-v2/top.png);

    background-color: #ff0f3d;

}

#ppoLeadCTA .vote-action {

    background-image: url(//bkhost.vn/wp-content/themes/bkhost/assets/css/../images/footer-v2/vote.png);

    background-color: #1e88e5;

}

#ppoLeadCTA .vote-action .ppo-cta-action-text {

    background-image: linear-gradient(180deg, #1e88e5 0%, #1e88e5 100%);

}

#ppoLeadCTA .toggle {

    display: block;

    margin-right: 5px;

    font-size: 30px;

    width: 50px;

    height: 50px;

    text-align: center;

    background: #ff1371;

    color: #fff;

    line-height: 50px;

    border-radius: 50%;

    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .15);

    cursor: pointer;

    -webkit-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;

    -moz-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;

    -ms-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;

    -o-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;

    animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;

}

#ppoLeadCTA .toggle ul {

    margin: 0;

    padding: 0;

    list-style: none;

    width: 50px;

    height: 50px;

    overflow: hidden;

    position: relative;

}

#ppoLeadCTA .toggle ul li {

    height: 50px;

    overflow: hidden;

    opacity: 0;

    transition: opacity .5s, transform .5s;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    text-align:center;

}