<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="http://1192566.musicblo.web.hosting-test.net/catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <div class="container qth"> <div class="row"> <div class="col-md-4"> <a href="#" class="item 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 class="col-md-4"> <div class="lb-shower"> <div class="circlephone"></div> <div class="circlephone2"></div> <div class="circlephone3"></div> </div> </div> <div class="col-md-4"> <a href="#" class="item 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>

.container { margin-top: 100px; } body { background: #337ab7; } .pinkBg { background-color: #ed184f!important; background-image: linear-gradient(90deg, #fd5581, #fd8b55); } .item { height:60px; width:60px; position:absolute; top:50%; left:50%; text-align:center; margin:-30px 0 0 -30px; border-radius:100px; z-index:1 } .item i{ line-height:56px; font-size:30px } .item .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) } } .item .ripple:nth-child(2){ animation-delay:.3s; -webkit-animation-delay:.3s } .item .ripple:nth-child(3){ animation-delay:.6s; -webkit-animation-delay:.6s } .lb-shower { width: 32px; height: 32px; border-radius: 50%; background-color: #fff; box-shadow: 0 5px 15px 5px rgba(0,0,0,0.3); position: relative; left: 50%; margin-left: -16px; } .circlephone, .circlephone2, .circlephone3 { border: 1px solid #fff; width: 62px; transform-origin: center; height: 62px; top: -15px; left: -15px; position: absolute; border-radius: 100%; animation: circle-anim 3s infinite cubic-bezier(0.4, 0, 1, 1); } .circlephone2 { animation-delay: -1s; } .circlephone3 { animation-delay: -2s; } @keyframes circle-anim { 0% {transform: rotate(0deg) scale(0.5) skew(1deg);opacity: 1;} 50% {transform: rotate(0deg) scale(1) skew(1deg);opacity: 0.6;} 100% {transform: rotate(0deg) scale(1.5) skew(1deg);opacity: 0.1;} }