WEBサイトのクオリティアップに重要なのが、細かなエフェクトやアニメーションだったりしますが、今回紹介するのはSVGのボタンに様々なエフェクトが加えることができる「Distorted Button Effects」です。

ボタンをクリックすることででシンプルなエフェクトから、ボタンを歪ませたり、ボタン自体に波紋を走らせたりと今までには無い、ユニークな表現が可能となっています。

詳しくは以下

エフェクトについては、自由に制作することが可能で応用方法や実装方法については「Distorted Button Effects with SVG Filters | Codrops」をご覧ください。

ソースコードはgithubに公開されており、ライセンスは「used freely in personal and commercial projects. 」と記載されており、個人・商用問わず自由に利用が可能とのことです。これからWEBサイトを制作する方で先進的なエフェクトを探していたという方は是非どうぞ。

Distorted Button Effects | Codrops