Ripple Dot Animation - Bootstrap Snippets

<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="intro-banner-vdo-play-btn pinkBg" target="_blank"> <i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i> <span class="ripple pinkBg"></span> <span class="ripple pinkBg"></span> <span class="ripple pinkBg"></span> </a> </div> </div> </div>

.pinkBg { background-color: #ed184f!important; background-image: linear-gradient(90deg, #fd5581, #fd8b55); } .intro-banner-vdo-play-btn{ height:60px; width:60px; position:absolute; top:50%; left:50%; text-align:center; margin:-30px 0 0 -30px; border-radius:100px; z-index:1 } .intro-banner-vdo-play-btn i{ line-height:56px; font-size:30px } .intro-banner-vdo-play-btn .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 } @-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) } } .intro-banner-vdo-play-btn .ripple:nth-child(2){ animation-delay:.3s; -webkit-animation-delay:.3s } .intro-banner-vdo-play-btn .ripple:nth-child(3){ animation-delay:.6s; -webkit-animation-delay:.6s }