個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。
今回は、そんなホバーエフェクトから、40種類以上のホーバーエフェクトをCSSだけで簡単に実装できるCSSライブラリーをご紹介します。
CSSを読み込んで、クラス名をつけるだけで実装できるので、とってもお手軽ですよ。
ご参考になれば幸いです。

40種類以上のホバーエフェクトをCSSだけで簡単に実装できる「Hover.Css」

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」
Hover.css」は40種類以上のホバーエフェクトをCSSだえけで簡単に実装できるCSSライブラリーです。
早速、使い方を見て行きましょう。

Hover.Cssの使い方

GitHubから、css > hover.cssもしくはhover-min.cssをダウンロードします。
ダウンロードしたCSSファイルを、当該サイトに読み込みます。

これで準備が整いました。
あとは、エフェクトを実装したい要素のクラス名にbtnを加え、40種類あるエフェクトのなかから、実装したいエフェクトを選び、クラス名に追加するだけです。
たとえば、カーソルを載せたときに、ふわりと浮いて影ができるエフェクトを実装したい場合は以下のようになります。

これで実装完了です。
簡単ですよね。

エフェクトと対応するクラス名一覧

Hover.Cssで実装できるエフェクトとクラス名の一覧です。
ご参考にどうぞ。

2D Transforms

Border Transitions

Shadow and Glow Transitions

Speech Bubbles

Curls

Hover.css

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 1
  • 1

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

html/cssでtableを組むのって、手間がかかりますよね。 そんなとき便利なのがジェネレータ

記事を読む

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に

記事を読む

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ

記事を読む

HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

「このサイトのココどうやっているんだろう?」そう思ったとき、 ソースを見るか、Chromeのデベロ

記事を読む

背景画像をフルスクリーン&レスポンシブ対応にする方法

背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります

記事を読む

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。 表現力豊

記事を読む

売上手数料なし!簡単・便利なWixStoresでネットショップを開業する方法

「知識ゼロだけど自分でネットショップを作りたい」「業者に頼む余裕も予算もない」そんな方にオススメなの

記事を読む

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した

記事を読む

CSS3を知らなくてもOK!便利すぎるCSS3関連ツール&ジェネレーター51

CSSを入力するときには、細かいプロパティを覚えていないと、作業がなかなかはかどりません。 特に、

記事を読む

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3になって、色名についても大幅に選択肢が増えたのをご存知でしょうか。 私は知りませんでした。

記事を読む