スマホだとホバー時のスタイルの設定が出来ないので(実際は出来るけれど見えにくい)、ボタンのアニメーションがPCと比べると少しだけ寂しいですよね。
そこで今回は送信ボタン(submitボタン)用のアニメーションCSSをご紹介します。
ホバーではなく、ボタンを押すとカッコイイアニメーションが動き出します。
ボタンにアクセントをつけたい方、ぜひ参考にしてみてはいかがでしょうか？
アニメーションがカッコイイ！送信ボタン用アニメーションCSS 10選
ボタンが鳥に変化して飛んでいくアニメーション送信ボタンCSS
See the Pen
#04animation: send button transforms into birds by Claudia (@eyesight)
on CodePen.
これはかなり面白い送信ボタン。
鳥が飛んでいくということで、動きが面白いのに加え視覚的にも送信出来ているのがわかります。
JSも使用しますが動作も軽く、簡単に実装できるのでオススメのアニメーションCSSボタンです。
出現したローダーがくるくる回転するアニメーション送信ボタンCSS
See the Pen
Submit Loader by Raduan (@mrraduan)
on CodePen.
成功、エラーがわかりやすいアニメーション送信ボタンCSS
See the Pen
Animated 2 states Submit Buttons by Nour Saud (@nourabusoud)
on CodePen.
ボタン内のテキストが変化するシンプルなアニメーション送信ボタンCSS
See the Pen
Submit with micro-copy status by Nicolás J Engler (@nicolasjengler)
on CodePen.
ボタンがローが～に変化する面白いアニメーション送信ボタンCSS
See the Pen
Button Loading Animation by Joshua Ward (@joshuaward)
on CodePen.
ボタンがチェックマークに変化するアニメーション送信ボタンCSS
See the Pen
Submit Button by thelaazyguy (@thelaazyguy)
on CodePen.
ボタンがチェックマークに変化するアニメーション送信ボタンCSS2
See the Pen
Button Interaction by Dhanish (@dhanishgajjar)
on CodePen.
ボタン内の手紙が飛んでいく面白いアニメーション送信ボタンCSS
See the Pen
Send button with a transition by Irem Lopsum (@iremlopsum)
on CodePen.
シンプルなアニメーションの送信ボタンCSS
See the Pen
Organic Button by Rik Schennink (@rikschennink)
on CodePen.
