※以下で紹介しているものはホバーやクリック時のエフェクトが主になるので、確認などはPCで行ってください。
CSS-only super tilt button
よく見るクリックすると押し込まれるような見た目になるボタンにさらに手を加えたタイプで、クリックした位置によって押し込まれる部分が変わります。
実装はすべてCSSでされており、具体的にはまずボタンの中に複数のspan
要素を配置し、それぞれクリックされた際にテキストや背景の部分をCSSのtransform
でずらしているのですが、そのtransform
の値を場所毎(span
要素毎)に異なる値で調整して行くことでこのような見せ方を実現しています。
Blobs button
見た目は背景色が指定されていないシンプルなゴーストボタンのような見栄えですが、ホバーすると下からモコモコした感じの要素が出てきて背景色が塗り潰されるといったタイプのエフェクトです。
こちらもCSSのみで実装されており、モコモコした要素に使うspan
要素をあらかじめ配置して隠しておき、それをCSSのtransform
で表示させつつtransition-delay
で少しずらして表示するように調整すればこのような見せ方ができます。
Shiney Button
こちらも見た目はシンプルなゴーストボタンですが、ホバーすると背景色が表示されると同時にキラーンと光るようなエフェクトのついたものです。
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-function
のsteps()
を使って操作してあげることでこのような見栄えにできます。
スプライト画像を用意するのが少し手間ですが、先ほど紹介したCodropsでマスクイメージの作り方についても触れられているので、興味ある方はそちらもチェックしてみてください。
Glitch Button using an SVG filter
ホバー時にグリッチエフェクトを用いたボタンのサンプルで、こちらに関してはこれまでのものとは違ってSVGやJavaScriptも併用して実装するものになっています。
Button bubble effect
同じくSVGやJavaScriptも併用して実装するエフェクトで、ホバーするとボタンから泡のようなものが分離するような見栄えになっています。
また、ホバーしている間はボタンカラーが変わり続けるスタイルも指定されています。
Parallax 3D Button with JS controlled CSS variables
タイトルにあるように立体的な見栄えになるようなエフェクトを付けたボタンで、ホバーする位置によって傾き具合が変化します。
実装にはCSSとJavaScriptを使用していますが、どちらも割とシンプルな記述でいけます。
Button Ripple Effect - VanillaJS
Material designにあったリップルエフェクトのような動きを取り入れたボタンで、クリックするとエフェクトを確認できます。
エフェクトは一箇所からのみとかではなくしっかりクリックした箇所から実行されるというのとライブラリなどを使用せずVanillaJSで実装しているのが特徴です。
Weeeeee
最後はまさに「Weeeeee」って感じのボタンで、どのようなものかは自身でクリック(押しっ放し)してみてください :)
特に複雑なことはしておらず、実装に必要なのはCSSのみで記述もシンプルな感じで実装できます。