ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10

Tips

ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10

近年多くのサイトで採用されているパッと見がシンプルなボタンデザインでも、ホバーやクリックぐらいは少しユニークな感じにしたいと思ったときに参考になりそうなエフェクトをCodePenにアップされているデモから紹介します。
そのまま参考にさせてもらうだけでなく、さらに自分なりにアレンジを加えてみたり、あとは紹介しているものを組み合わせてみても面白いエフェクトができそうです。

※以下で紹介しているものはホバーやクリック時のエフェクトが主になるので、確認などはPCで行ってください。

CSS-only super tilt button

See the Pen CSS-only super tilt button by Charlotte Dann (@pouretrebelle) on CodePen.

よく見るクリックすると押し込まれるような見た目になるボタンにさらに手を加えたタイプで、クリックした位置によって押し込まれる部分が変わります。
実装はすべてCSSでされており、具体的にはまずボタンの中に複数のspan要素を配置し、それぞれクリックされた際にテキストや背景の部分をCSSのtransformでずらしているのですが、そのtransformの値を場所毎(span要素毎)に異なる値で調整して行くことでこのような見せ方を実現しています。

Blobs button

See the Pen Blobs button by Nikolay Talanov (@suez) on CodePen.

見た目は背景色が指定されていないシンプルなゴーストボタンのような見栄えですが、ホバーすると下からモコモコした感じの要素が出てきて背景色が塗り潰されるといったタイプのエフェクトです。
こちらもCSSのみで実装されており、モコモコした要素に使うspan要素をあらかじめ配置して隠しておき、それをCSSのtransformで表示させつつtransition-delayで少しずらして表示するように調整すればこのような見せ方ができます。

Shiney Button

See the Pen Shiney Button by Jessica Biggs (@bigglesrocks) on CodePen.

こちらも見た目はシンプルなゴーストボタンですが、ホバーすると背景色が表示されると同時にキラーンと光るようなエフェクトのついたものです。

Stripped Diagonal Button Single Border

それぞれのボタン下にあるストライプ部分も含めすべてCSSのみで実装されたもので、ホバーするとストライプ部分がアニメーションします。
ストライプはbackground-image: repeating-linear-gradient()を使って表示しており、background-positionの位置変更にanimationを組み合わせることでこのような見栄えにできます。

CSS-Mask Button Hover Animation ( Experimental )

Codropsの「Transition Effect with CSS Masks」で紹介されたものをボタンに使用してみたというもので、マスクに使用するスプライト画像を配置しておき、ホバー時にそれをanimation-timing-functionsteps()を使って操作してあげることでこのような見栄えにできます。
スプライト画像を用意するのが少し手間ですが、先ほど紹介したCodropsでマスクイメージの作り方についても触れられているので、興味ある方はそちらもチェックしてみてください。

Glitch Button using an SVG filter

See the Pen Glitch Button using an SVG filter by Kareem Taftaf (@ktaftaf) on CodePen.

ホバー時にグリッチエフェクトを用いたボタンのサンプルで、こちらに関してはこれまでのものとは違ってSVGやJavaScriptも併用して実装するものになっています。

Button bubble effect

See the Pen Button bubble effect by Adrien Grsmto (@Grsmto) on CodePen.

同じくSVGやJavaScriptも併用して実装するエフェクトで、ホバーするとボタンから泡のようなものが分離するような見栄えになっています。
また、ホバーしている間はボタンカラーが変わり続けるスタイルも指定されています。

Parallax 3D Button with JS controlled CSS variables

タイトルにあるように立体的な見栄えになるようなエフェクトを付けたボタンで、ホバーする位置によって傾き具合が変化します。
実装にはCSSとJavaScriptを使用していますが、どちらも割とシンプルな記述でいけます。

Button Ripple Effect - VanillaJS

See the Pen Button Ripple Effect - VanillaJS by Tommaso Poletti (@tomma5o) on CodePen.

Material designにあったリップルエフェクトのような動きを取り入れたボタンで、クリックするとエフェクトを確認できます。
エフェクトは一箇所からのみとかではなくしっかりクリックした箇所から実行されるというのとライブラリなどを使用せずVanillaJSで実装しているのが特徴です。

Weeeeee

See the Pen Weeeeee by Mattia Astorino (@equinusocio) on CodePen.

最後はまさに「Weeeeee」って感じのボタンで、どのようなものかは自身でクリック(押しっ放し)してみてください :)
特に複雑なことはしておらず、実装に必要なのはCSSのみで記述もシンプルな感じで実装できます。

Close the search window,
please press close button or esc key.