次のCSSでボタンのロールアウト時に潜水艦のソナーのようなアニメーション効果が得られます。

CSS

.btn-ping:hover,.btn-ping:focus{
	animation: btn-ping 1s;
	box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}
@keyframes btn-ping {
	0% {
		box-shadow: 0 0 0 0 #21e6c1;
	}
}

JavaScript

<div class="buttons">
  <button class="btn-ping">ボタン</button>
</div>

出力結果は次のようになります。「ボタン」という文字の上にマウスカーソルを置いてみてください。