<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> <div class="circulo button" id="button-0"> <img class="icono" src="https://d30y9cdsu7xlg0.cloudfront.net/png/10685-200.png"> </div> </div>

.circulo { width: 70px; height: 70px; background: green; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; position: absolute; } .circulo::before, .circulo::after { content:""; position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); width: 70px; height: 70px; border: 10px solid gray; border-radius:100%; animation: latido linear 3s infinite; } .circulo::after { animation-delay: -1.5s; } @keyframes latido { 0% { width:70px; height:70px; border:10px solid gray; } 100% { width:120px; height:120px; border:10px solid transparent; } } .icono { width: 50%; height: 50%; margin-top: 12px; margin-left: 14.5px; } #button-0 { top: 50px; left: 100px; }