<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"> <div class="row"> <div class="container"> <div class="row"> <div class="intro-banner-vdo-play-btn"> <img class="intro-banner-vdo-play-btn" src="https://revupway.com/images/logo.png"/> <span class="ripple pinkBg"></span> <span class="ripple pinkBg"></span> <span class="ripple pinkBg"></span> </div> </div> </div> </div>

.pinkBg { background-color: #000!important; } .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; background-image: url(https://revupway.com/images/logo.png); } .intro-banner-vdo-play-btn img{ position:absolute; height:100px; width:130px; top:50%; } .intro-banner-vdo-play-btn .ripple{ position:absolute; width:230px; height:230px; z-index:-1; left:50%; top:50%; opacity:0; margin:-95px 0 0 -85px; border-radius:100%; -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 }