CSSテックラボ

ボタンのロールアウトでソナーのようなアニメーション

2018年11月19日

次の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>

出力結果は次のようになります。

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

CONTACT US

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。