Как сделать кнопку с волнами?

Question

[Mary Солнечная]

Добрый день. Имеется вот такая кнопка, внутри которой будет ссылка на переход к элементу страницы.

Подскажите, пожалуйста, как сделать так, чтобы от кнопки все время исходили что-то вроде волн, вот как раз вот этими прозрачными бордерами, которые ее окружают. Что-то подобное я видела у самсунгов - когда кто-то звонит то на кнопке принять вызов обычно тоже есть волна. Совершенно не представляю как можно добиться такого эффекта.
Может быть вот эта картинка наведет на мысль.

Буду благодарна за помощь!

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/shxfzx0a/
https://jsfiddle.net/shxfzx0a/2/

Comments

[Mary Солнечная]

Огромное спасибо! Это то, что нужно! :)

[Mary Солнечная]

То есть это получается не просто сss а уже работа препроцессора? Его нужно устаналивать

[Сергей delphinpro]

Mary Солнечная: нет. препроцессор только для того чтобы цвет было легко поменять.
в первом варианте - просто css

[Сергей delphinpro]

цвет можно и руками в первом варианте поменять. просто так много замен нужно делать

[DTX]

Сергей: а если три волны?)
и чего как ключевых позиций много?) Двух не достаточно?)

[Сергей delphinpro]

DTX: Можно и три, и четыре, и сотню. Только описание кейфреймов увеличится.
Если получится уменьшить количество ключевых кадров - дайте знать, запишу себе в копилку ).

[Сергей delphinpro]

По хорошему, надо бы миксинчик с параметрами сделать и не париться. Но лень )

[DTX]

Сергей: в ответ написал.
Мб в капилочке найдётся что-нибудь для решения
Как изменить длительность анимации в процессе анимации?
?)

Answer 2

[DTX]

codepen.io/anon/pen/akqzaa