How to make a round pulsating "call" button with a tube icon inside so that waves spread around it and attract attention?

<button type="button" class="phone_btn"><span class="phone_icon"></button>

Closed due to the fact that off-topic participants Dmitry Kozlov , Air , user192664, HamSter , Let's say Pie Oct 27 '18 at 12:12 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - Air, HamSter, Let's say Pie
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Open the site where you saw it, and copy the solution. In one of the implementations, I saw that there were several divs, with a border radius with which the animation resizes - Dmytryk
  • I saw it a long time ago and now I can’t find it - Artur Han
  • don't thank google - WhyTry

1 answer 1

One option would be a gif picture (animation).

The second option is to do it through animations in CSS: create several divs through CSS, arrange them as circles, set different transparency, and then prescribe the scaling animation to them via @keyframes

Watch an example

 #qwe{ margin 50px; width:100px; height: 100px; background-color: red; border-radius:50px; animation: mymove 1s infinite; } @keyframes mymove { from {transform: scale( 1)} to {transform: scale(1.5)} }
  • Show with an example - Artur Han
  • @ArturHan Added by - Yuri