すぐに使えるCSSボタンアニメーション10選

これまでに作って好評だったボタンアニメーションを10個ご紹介いたします。
ホバーは忙しいとつい透過や反転で対応しがちですが、少し手間を加えるだけでサイトのクオリティがぐっと上がるのでおすすめです。
コピペで使えるので、カラーやEasingの値などを変更して自分好みにカスタマイズしてみてください。

グラデーション

See the Pen Button Animation01 (Gradient) by tabam (@tabam) on CodePen.

Button02 のようなグラデーションのかかった角丸の線を作るのには少し工夫が必要です。
ボーダーを太めに設定してその上から角丸のついた擬似要素被せて再現しています。

テキストが広がる

See the Pen Untitled by tabam (@tabam) on CodePen.

テキストが回転・背景が伸びる

See the Pen Button Animation03 (Rotate/Background) by tabam (@tabam) on CodePen.

円が広がる

See the Pen Button Animation04 (Circle) by tabam (@tabam) on CodePen.