<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="container"> <div class="row"> <div class="container"> <div class="row"> <a href="#" class="magic-link-btn darkBlue" target="_blank"> <span class="ripple lightBlue"></span> <span class="ripple lightBlue"></span> <span class="ripple lightBlue"></span> </a> </div> </div>

.darkBlue { background-color: #152327!important; } .lightBlue { background-image: linear-gradient(119deg, #bce7f1, #87cadf); } .magic-link-btn{ height:60px; width:250px; position:absolute; top:50%; left:50%; text-align:center; margin:-30px 0 0 -30px; border-radius:100px; } .magic-link-btn i{ line-height:56px; font-size:30px } .magic-link-btn .ripple{ position:absolute; height:60px; width:250px; z-index:-1; transform: translateZ(-1px); left:12%; top:50%; opacity:0; margin:-30px 0 0 -30px; border-radius:100px; -webkit-animation:ripple 3.5s infinite; animation:ripple 3.5s infinite } @-webkit-keyframes ripple{ 0%{ opacity:1; -webkit-transform:scale(0.9); transform:scale(0.9) } 100%{ opacity:0; -webkit-transform:scale(1.5, 2); transform:scale(1.2, 1.5) } } @keyframes ripple{ 0%{ opacity:1; -webkit-transform:scale(0.9); transform:scale(0.9) } 100%{ opacity:0; -webkit-transform:scale(1.5, 2); transform:scale(1.2, 1.5) } } .magic-link-btn .ripple:nth-child(2){ animation-delay:.8s; -webkit-animation-delay:.8s } .magic-link-btn .ripple:nth-child(3){ animation-delay:.35s; -webkit-animation-delay:.35s }