ボタンや画像に使えるCSSエフェクト

こんにちは、CUBEの西田です。 今回は、ホームページ制作にちょっとしたアクセントとして利用できるCSSエフェクトを紹介します。 使い方は非常に簡単!画像やボタン、ロゴやコンテンツの一部になどclassを指定するだけで色んなエフェクトを実装できます。

Hover.cssの使用方法

まずはこちらから「hover-min.css」をダウンロードします ≫ ダウンロード

ダウンロードした「hover-min.css」をheader内に記述します。 [html] [/html]

後は下記のclassを指定するだけで完了! [html] Add to Basket //class=”hvr-(エフェクト名)” [/html]

エフェクトの種類が非常に多いので、タイプに分けてデモを間単にご紹介します。

ご紹介したデモを含め100種類以上のパターンがあります。 そのままだと使用箇所が限られてきますが、カスタマイズも難しくないのでサイトに合わせて色々アレンジしてみてはいかがでしょうか!