CSSで実装されたボタンのかわいい動きに思わずクリックしたくなってしまうCSSアニメーションの実装方法

ボタンをクリックするためにホバーすると、ボタンがゆらゆら揺れるかわいいアニメーションに思わずクリックしたくなってしまうCSSアニメーションを紹介します。

ボタン自体だけでなく、文字が少し遅れて揺れるのもいいですね。

デモのアニメーション

CSS button hover


実際の動作は、下記でお楽しみください。

See the Pen
CSS button hover
by Danil Goncharenko (@Danil89)
on CodePen.

HTML

HTMLは非常にシンプルです。

CSS

ボタンなので、cursor: pointer;でカーソルをポインターにし、@keyframesでアニメーションを定義します。span内のテキストはタイミングをずらすのがポイントです。

sponsors

top of page

©2019 coliss