100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。

先日、「Hover.css」というボタンをホバー時のCSSエフェクト集があるのを知りました。

このHover.cssを、ちょっと使ってみたところ、WEBで利用するボタンなどの上にカーソルが来たときに、手軽にエフェクトを追加できて便利だったので紹介です。

ついでに、WordPressのテーマで利用してみたのですけど、こちらも手軽に使うことができたので、その利用方法も紹介します。

例えば、こんなボタンを手軽に作ることができます。

スポンサーリンク
レクタングル(大)広告

Hover.cssとは

Hover.cssデモページ

Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。

すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。

利用するときは、こんなタグで利用できます。

Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。

Hover.cssの主な利用手順

Hover.cssを利用するのに必要な主な手順は、以下の3手順です。

  1. Hover.cssのダウンロード&設置
  2. Hover.cssを呼び出す
  3. Hover.css用のタグを記入する

利用するファイルも、hover.css(縮小版はhover-min.css)の1つみなので、手軽に扱うことができます。

Hover.cssのダウンロード&設置

まずは、Hover.cssをダウンロードしてきてコピーで設置します。

ダウンロードは、IanLunn/Hover · GitHubの「Download ZIP」から行います。

Hover.cssのダウンロード

ダウンロードすると、「Hover-master.zip」というファイルができるので、解凍し中にある「css」フォルダをそのまま編集フォルダ内にコピーしておきます。

WordPressだと、テーマフォルダ直下などでOKです。

Hover.cssを呼び出す

Hover.cssの利用方法は、Hover.cssチュートリアルにも詳しく書かれているので、詳細はこちらを参照してください。

ここでは、簡単な使い方をいくつか紹介します。

まずは、通常サイトの場合、Hover.cssは以下のように呼び出します。

WordPressテーマで利用する場合は以下のように呼び出します。

WordPress子テーマフォルダ内のファイルを呼び出す場合は、以下のように呼び出します。

テーマ全体で、呼び出したくなく記事からのみ呼び出したい場合は、Wordpressエディターに以下のように打ち込んでもOKです。

Hover.css用のタグを記入する

あとは、HTML要素を記入して、Hover.cssにあるクラスを記入するだけです。

ボタンスタイルの準備

ただ、Hover.cssには、ボタン表示用のクラスは存在しないので、ボタンで使用する場合は、あらかじめ作っておく必要があります。

ボタンで利用する場合は、こんな感じのボタンクラスを、あらかじめ用意しておきます。

ボタンのCSS設定は、以下のようなジェネレーターからも行うことができます。

これを、以下のように呼び出すと、

以下のように表示されます。

テストボタン

Hover.cssエフェクトの呼び出し方

これに、バズアウトエフェクト用のクラスを追加すると、

マウスホバー時に、以下のようなエフェクトが動作します。

震えるボタン

もちろん、ボタンスタイルを適用していなくても、ホバー時には、同様の動作を行います。

通常のA要素でもOK。

震えるリンク

もちろん、ただの画像などでもOKです。

震える画像

その他のHover.cssエフェクト

Hover.cssには、全部で100種類以上のスタイルシートのみで動作するエフェクトが用意されています。

2D変化

Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out

背景変化

Fade Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical

アイコン

こちらはヘッダーなどで、FontAwesomeファイルの呼び出しが必要です。

Icon Back Icon Forward Icon Down Icon Up Icon Spin Icon Drop Icon Fade Icon Float Away Icon Sink Away Icon Grow Icon Shrink Icon Pulse Icon Pulse Grow Icon Pulse Shrink Icon Push Icon Pop Icon Bounce Icon Rotate Icon Grow Rotate Icon Float Icon Sink Icon Bob Icon Hang Icon Wobble Horizontal Icon Wobble Vertical Icon Buzz Icon Buzz Out

ボーダー変化

Border Fade Hollow Trim Ripple Out Ripple In Outline Out Outline In Round Corners Underline From Left Underline From Center Underline From Right Reveal Underline Reveal Overline Reveal Overline From Left Overline From Center Overline From Right

影・ぼかし変化

Shadow Grow Shadow Float Shadow Glow Shadow Radial Box Shadow Outset Box Shadow Inset

スピーチバブル

Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left

カール

Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left

まとめ

こんな感じに、様々なホバーエフェクトが、クラスを指定するだけで手軽に使用できるようになります。

Hover.cssは、縮小版の「hover-min.css」だけで、現在101KBあります。全ての、エフェクトを使用せずとも、使用したいエフェクトだけを抽出して使用するための参考資料としても、もってこいだと思います。

『100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。』へのコメント

  1. 名前:まつ 投稿日:2015/04/25(土) 05:02:02 ID:9f25786d6

    恐れ入ります。
    「呼び出す」というのがよく分からないのですが、設置したボタンにこれらの効果を働かせる場合は、サイト全体の場合、記事内の場合など、どのファイルのどこにコードを設置すればよいのでしょうか?

    子テーマで編集しているので3番目のコードで設置を試しているのですが、ヘッダーやentry-body.php 、header-insert.php などに設置しても反応しないのですが…

    ちなみに4番目のコードで記事内に直接設置すれば作動しますので Hover.css の場所が間違っているなどはないと思うのですが。

    ローカル環境で試していますが、そのせいということはあるでしょうか?

  2. わいひら 名前:わいひら 投稿日:2015/04/25(土) 14:23:24 ID:834d28508

    Hover.css の場所が間違っているなどはないと思うのですが。

    ソースなどからHover.cssのURLを取得し、直接アドレスバーに入力して、Hover.cssファイルが正常に読み込まれているかどうか確認してみましたでしょうか?

    ローカルのせいとかではないと思います。僕も、最初ローカルでテストしていたので。

  3. 名前:まつ 投稿日:2015/04/25(土) 18:59:08 ID:cb1e2c45c

    ありがとうございます。
    Hover.css は読み込めていると思います。
    ローカルのアドレスでアクセスできます。ズラッと数字と文字の羅列で意味は分かりませんが。

    4番目のコード

    @import url(“http://Hover.cssへのパス/css/hover-min.css”);

    「Hover.cssへのパス」にそのアドレスを入力して、記事に直接貼れば、記事内のボタンは効果が効いたボタンになります。

    サイト全体のボタンやリンクにも効果を聞かせたい場合、子テーマ編集用の3番目のコード

    <link href="/css/hover-min.css” rel=”stylesheet” media=”all”>

    はヘッダー内に設置すればよいのでしょうか?

  4. わいひら 名前:わいひら 投稿日:2015/04/25(土) 19:10:15 ID:834d28508

    子テーマの場合は以下のコードを、内に記述して、指定した場所にCSSファイルがあれば、多分いけると思います。

  5. 名前:まつ 投稿日:2015/04/25(土) 21:18:56 ID:ee35325ce

    ありがとうございます。
    提示頂いたコードをheader.php内に貼ってみましたが作動させられませんでした。

  6. わいひら 名前:わいひら 投稿日:2015/04/25(土) 22:46:14 ID:834d28508

    このページのものは、記事に書いてあるようにして動作しているので、それで動作しないようなら、実際のページを見ないと何ともいえないかもしれません。

  7. 名前:まつ 投稿日:2015/04/26(日) 00:03:10 ID:1f0866766

    ありがとうございます。
    当方の不注意でHover-masterフォルダごとコピーしてしまったことによる失敗でした。

    改めてcssフォルダだけコピーすることで作動させられました。

    お手数とらせてしまい大変申し訳ありませんでした。

    とても有意義な情報ありがとうございます。

  8. 名前:step 投稿日:2015/11/05(木) 16:02:59 ID:d6fa5f588

    失礼いたします。
    こちらで紹介されている「Hover.css」をサイトに利用してみようと考えています。

    動作は正常に行われていますが、作動した時の色を変更したいと考えています。
    どのような方法で行えば可能になるかお教え願えませんでしょうか。
    (初心者質問でしたら申し訳ありません)

  9. 名前:step 投稿日:2015/11/05(木) 16:15:35 ID:d6fa5f588

    一応「Hover-min.css」ではなく「Hover.css」にして
    cssの設定色を変更してみました。

    当面これで対処したいと思います。

    お騒がせしました。

  10. わいひら 名前:わいひら 投稿日:2015/11/14(土) 11:34:12 ID:a210ea93e

    返信が遅れて申しわけれません。
    色を変えるのにも、文字色や、背景色などがありますが、基本的に、スタイルシートファイル(Wordpressだったらstyle.css)に
    「Hover-min.css」や「Hover.css」などで定義してあるスタイルを上書きすれば色などを変更することができます。

    どういった、CSSセレクタを変更するのかわからないので、詳しくは書けませんが、Wordpressの場合は、style.cssに以下のように書くと色の設定が上書きされます。

    xxxx {
    color: red;
    }

    詳しくは以下の、CSSの説明部分を読んだ方が理解が深まると思います。
    HTMLクイックリファレンス

  11. 名前:通りすがり 投稿日:2015/12/09(水) 14:45:46 ID:69744f56f

    IE9.10,11で効かないのですが、解決方法を教えて頂けないでしょうか?

  12. わいひら 名前:わいひら 投稿日:2015/12/10(木) 15:19:20 ID:ff7bff2b1

    IE11で、このページを動作確認してみたのですが、正常に動作しているようです。
    なので、IE11で、不具合が確認できないので、何とも言えないです。
    古いIEブラウザだと対応していないCSSプロパティーとかはあるかもしれません。
    体をしていないプロパティーの場合は、CSSだけではどうしようもないかもしれません。