見た目はUIデザインによくある普通のボタン、でも触ると高電圧の電流が流れるエフェクトが美しくてかっこいい

Post on:2023年2月22日

sponsors

見た目は、角丸の普通のボタン。

ホバーすると、高電圧の電流が流れるようなエフェクトが美しくてかっこいいボタンを紹介します。厨二病心を全力でくすぐられますね！

ボタンの動作をアニメーションで。

このボタンの元は、下記のDribbbleです。
Buzuk氏のDribbbleには、他にもかっこいいボタンがたくさんあります。

このDribbbleにインスパイアされたボタンは、Figma上でも確認できます。

このDribbbleにインスパイアされて、実装されたボタンはこちら。
SVGとGSAPのアニメーションライブラリを使用して実装されています。

さらに、JavaScriptはなし、CSSで実装されたボタンはこちら。
さすがに、エフェクトは少し寂しくなります。