Can you tell me how to make a pulsing button? pulsing button

This kind?

    2 answers 2

    *{ box-sizing:border-box; } body{ background-color:#cda; text-align:center; margin:0; padding:40px 15px 0; } .annoying-btn{ display:inline-block; width:60px; height:60px; border-radius:50%; border:10px solid rgba(255,255,255,.3); background:radial-gradient(circle at center,#fff 10px ,rgba(255,255,255,.6) 10px); background-clip:padding-box; box-shadow:0 0 15px rgba(255,255,255,.4); transform-origin:center; animation:annoying .4s ease-in infinite alternate; } @keyframes annoying{ from{ transform:scale(1); } to{ transform:scale(1.2); } } 
     <div class="annoying-btn"></div>

      Like this)

       .pilsing { position: absolute; z-index: 100; width: 40px; height: 40px; left: 50%; top: 50%; margin: -20px 0 0 -20px; } .pilsing div:nth-child(1) { animation: pulse 2s infinite; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; } .pilsing div:nth-child(2) { animation: pulse 2s infinite .3s; -webkit-animation: pulse 2s infinite .3s; -moz-animation: pulse 2s infinite .3s; -o-animation: pulse 2s infinite .3s; } .pilsing div { border-radius: 50%; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 40px; height: 40px; border: 2px solid #fff; }@keyframes pulse{ 0%{ transform:scale(.1); -moz-transform:scale(.1); -webkit-transform:scale(.1); -o-transform:scale(.1); -ms-transform:scale(.1); opacity:0 } 50%{ opacity:.4 } 100%{ transform:scale(1.6); -moz-transform:scale(1.6); -webkit-transform:scale(1.6); -o-transform:scale(1.6); -ms-transform:scale(1.6); opacity:0 } } @-webkit-keyframes pulse{ 0%{ transform:scale(.1); -moz-transform:scale(.1); -webkit-transform:scale(.1); -o-transform:scale(.1); -ms-transform:scale(.1); opacity:0 } 50%{ opacity:.4 } 100%{ transform:scale(1.6); -moz-transform:scale(1.6); -webkit-transform:scale(1.6); -o-transform:scale(1.6); -ms-transform:scale(1.6); opacity:0 } } @-moz-keyframes pulse{ 0%{ transform:scale(.1); -moz-transform:scale(.1); -webkit-transform:scale(.1); -o-transform:scale(.1); -ms-transform:scale(.1); opacity:0 } 50%{ opacity:.4 } 100%{ transform:scale(1.6); -moz-transform:scale(1.6); -webkit-transform:scale(1.6); -o-transform:scale(1.6); -ms-transform:scale(1.6); opacity:0 } } @-o-keyframes pulse{ 0%{ transform:scale(.1); -moz-transform:scale(.1); -webkit-transform:scale(.1); -o-transform:scale(.1); -ms-transform:scale(.1); opacity:0 } 50%{ opacity:.4 } 100%{ transform:scale(1.6); -moz-transform:scale(1.6); -webkit-transform:scale(1.6); -o-transform:scale(1.6); -ms-transform:scale(1.6); opacity:0 } } 
       <body style="background: #000;"> <div class="pilsing"> <div></div> <div></div> </div> </body>