<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="call-button"> <a href="tel:123-456-7890"> <span class="phone-block"><svg class="svg-inline--fa fa-phone" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"></path></svg><!-- <i class="fa fa-phone"></i> Font Awesome fontawesome.com --></span> <span>Call Us</span> </a> </div>

.call-button { position: fixed; text-align: center; right: -58px; background: #f37d26; top: 68%; transform: rotate(90deg); color: #fff; padding: 14px 29px; z-index: 99999; cursor: pointer; font-size: 17px; right: auto; left: 10px; top: auto; bottom: 20px; transform: none; padding: 0; width: 82px; min-height: 82px; line-height: 82px; border-radius: 82px; animation: shadow-pulse 1s infinite; } .call-button a { color: #fff; text-decoration: none; display: block; position: relative; } .call-button span.phone-block { display: block; background: #f37d26; border-radius: 82px; -webkit-animation: rotateWord 4s linear infinite 0s; -ms-animation: rotateWord 4s linear infinite 0s; animation: rotateWord 4s linear infinite 0s; -webkit-animation-delay: 2s; -ms-animation-delay: 2s; animation-delay: 2s; position: absolute; left: 0; width: 100%; } .call-button i { font-size: 36px; -webkit-transform: translateY(22%); -ms-transform: translateY(22%); transform: translateY(22%); } @keyframes shadow-pulse{ 0%{ box-shadow:0 0 0 0px rgba(0, 0, 0, 0.2); } 100%{ box-shadow:0 0 0 35px rgba(0, 0, 0, 0); } } @-webkit-keyframes rotateWord { 0% { opacity: 0; } 100% { opacity: 1; -webkit-transform: translateY(0); } 2% { opacity: 1; -webkit-transform: translateY(0);} 5% { opacity: 1; -webkit-transform: translateY(0);} 17% { opacity: 1; -webkit-transform: translateY(0); } 20% { opacity: 0; -webkit-transform: translateY(0); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 5% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);} 17% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } 80% { opacity: 0; } 100% { opacity: 0; } }