SNSやYoutubeなどでよく見かけるいいねボタン、かわいいエフェクトも多くて気になっていたので試しに作ってみました。
See the Pen
good-btn by kushi (@kushi95)
on CodePen.
クリックした際クラスを付与するためにJSを使っていますが他は全てCSSです。
ハートと円と飛び散る泡をそれぞれタイミングをずらして動かしているだけなので簡単に作成できます。
タイミングと動きは微調整が必要ですが、動かす要素を変更したりカスタマイズもしやすいと思います。