<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 ----------> <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"> <a href="#" class="pinkBg btns" target="_blank"> <span class="ripple pinkBg"></span> <span class="ripple pinkBg"></span> <span class="ripple pinkBg"></span> </a> </div

.pinkBg { background-image: linear-gradient(90deg, #fd5581, #fd8b55); } .btns{ height:60px; width:60px; position:absolute; top:50%; left:50%; text-align:center; margin:-30px 0 0 -30px; border-radius:100px; z-index:1 } .btns .ripple{ position:absolute; width:160px; height:160px; z-index:-1; left:50%; top:50%; opacity:0; margin:-80px 0 0 -80px; border-radius:100px; -webkit-animation:ripple 1.8s infinite; animation:ripple 1.8s infinite } .btns .ripple:nth-child(2){ animation-delay:.3s; -webkit-animation-delay:.3s } .btns .ripple:nth-child(3){ animation-delay:.6s; -webkit-animation-delay:.6s } @-webkit-keyframes ripple{ 0%{ opacity:1; -webkit-transform:scale(0); transform:scale(0) } 100%{ opacity:0; -webkit-transform:scale(1); transform:scale(1) } } @keyframes ripple{ 0%{ opacity:1; -webkit-transform:scale(0); transform:scale(0) } 100%{ opacity:0; -webkit-transform:scale(1); transform:scale(1) } }