先日、「Hover.css」というボタンをホバー時のCSSエフェクト集があるのを知りました。
このHover.cssを、ちょっと使ってみたところ、WEBで利用するボタンなどの上にカーソルが来たときに、手軽にエフェクトを追加できて便利だったので紹介です。
ついでに、WordPressのテーマで利用してみたのですけど、こちらも手軽に使うことができたので、その利用方法も紹介します。
例えば、こんなボタンを手軽に作ることができます。
目次
Hover.cssとは
Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。
すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。
利用するときは、こんなタグで利用できます。
<a href="#" class="button hvr-float">Checkout</a>
Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。
Hover.cssの主な利用手順
Hover.cssを利用するのに必要な主な手順は、以下の3手順です。
- Hover.cssのダウンロード＆設置
- Hover.cssを呼び出す
- Hover.css用のタグを記入する
利用するファイルも、hover.css（縮小版はhover-min.css）の1つのみなので、手軽に扱うことができます。
Hover.cssのダウンロード＆設置
まずは、Hover.cssをダウンロードしてきてコピーで設置します。
ダウンロードは、IanLunn/Hover · GitHubの「Download ZIP」から行います。
ダウンロードすると、「Hover-master.zip」というファイルができるので、解凍し中にある「css」フォルダをそのまま編集フォルダ内にコピーしておきます。
WordPressだと、テーマフォルダ直下などでOKです。
Hover.cssを呼び出す
Hover.cssの利用方法は、Hover.cssチュートリアルにも詳しく書かれているので、詳細はこちらを参照してください。
ここでは、簡単な使い方をいくつか紹介します。
まずは、通常サイトの場合、Hover.cssは以下のように呼び出します。
<link href="css/hover-min.css" rel="stylesheet" media="all"> <!-- Font Awesomeを利用したい場合は --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
WordPressテーマで利用する場合は以下のように呼び出します。
<link href="<?php echo get_template_directory_uri() ?>/css/hover-min.css" rel="stylesheet" media="all"> <!-- Font Awesomeを利用したい場合は --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
WordPress子テーマフォルダ内のファイルを呼び出す場合は、以下のように呼び出します。
<link href="<?php echo get_stylesheet_directory_uri() ?>/css/hover-min.css" rel="stylesheet" media="all"> <!-- Font Awesomeを利用したい場合は --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
テーマ全体で、呼び出したくなく記事からのみ呼び出したい場合は、Wordpressエディターに以下のように打ち込んでもOKです。
<style>
@import url("http://Hover.cssへのパス/css/hover-min.css");
</style>Hover.css用のタグを記入する
あとは、HTML要素を記入して、Hover.cssにあるクラスを記入するだけです。
ボタンスタイルの準備
ただ、Hover.cssには、ボタン表示用のクラスは存在しないので、ボタンで使用する場合は、あらかじめ作っておく必要があります。
ボタンで利用する場合は、こんな感じのボタンクラスを、あらかじめ用意しておきます。
.button {
background: none repeat scroll 0 0 #fff;
border: 1px solid #777;
border-radius: 3px;
color: #333;
cursor: pointer;
display: inline-block;
font-weight: bold;
line-height: normal;
margin-bottom: 20px;
padding: 6px 12px;
text-decoration: none;
}ボタンのCSS設定は、以下のようなジェネレーターからも行うことができます。
これを、以下のように呼び出すと、
<a href="#" class="button">テストボタン</a>
以下のように表示されます。
Hover.cssエフェクトの呼び出し方
これに、バズアウトエフェクト用のクラスを追加すると、
<a class="button hvr-buzz-out" href="#">震えるボタン</a>
マウスホバー時に、以下のようなエフェクトが動作します。
もちろん、ボタンスタイルを適用していなくても、ホバー時には、同様の動作を行います。
通常のA要素でもOK。
<a class="hvr-buzz-out" href="#">震えるリンク</a>
もちろん、ただの画像などでもOKです。
<img class="hvr-buzz-out" alt="震える画像" src="画像URL" />
その他のHover.cssエフェクト
Hover.cssには、全部で100種類以上のスタイルシートのみで動作するエフェクトが用意されています。
2D変化
<a href="#" class="button hvr-grow">Grow</a> <a href="#" class="button hvr-shrink">Shrink</a> <a href="#" class="button hvr-pulse">Pulse</a> <a href="#" class="button hvr-pulse-grow">Pulse Grow</a> <a href="#" class="button hvr-pulse-shrink">Pulse Shrink</a> <a href="#" class="button hvr-push">Push</a> <a href="#" class="button hvr-pop">Pop</a> <a href="#" class="button hvr-bounce-in">Bounce In</a> <a href="#" class="button hvr-bounce-out">Bounce Out</a> <a href="#" class="button hvr-rotate">Rotate</a> <a href="#" class="button hvr-grow-rotate">Grow Rotate</a> <a href="#" class="button hvr-float">Float</a> <a href="#" class="button hvr-sink">Sink</a> <a href="#" class="button hvr-bob">Bob</a> <a href="#" class="button hvr-hang">Hang</a> <a href="#" class="button hvr-skew">Skew</a> <a href="#" class="button hvr-skew-forward">Skew Forward</a> <a href="#" class="button hvr-skew-backward">Skew Backward</a> <a href="#" class="button hvr-wobble-horizontal">Wobble Horizontal</a> <a href="#" class="button hvr-wobble-vertical">Wobble Vertical</a> <a href="#" class="button hvr-wobble-to-bottom-right">Wobble To Bottom Right</a> <a href="#" class="button hvr-wobble-to-top-right">Wobble To Top Right</a> <a href="#" class="button hvr-wobble-top">Wobble Top</a> <a href="#" class="button hvr-wobble-bottom">Wobble Bottom</a> <a href="#" class="button hvr-wobble-skew">Wobble Skew</a> <a href="#" class="button hvr-buzz">Buzz</a> <a href="#" class="button hvr-buzz-out">Buzz Out</a>
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
背景変化
<a href="#" class="button hvr-fade">Fade</a> <a href="#" class="button hvr-sweep-to-right">Sweep To Right</a> <a href="#" class="button hvr-sweep-to-left">Sweep To Left</a> <a href="#" class="button hvr-sweep-to-bottom">Sweep To Bottom</a> <a href="#" class="button hvr-sweep-to-top">Sweep To Top</a> <a href="#" class="button hvr-bounce-to-right">Bounce To Right</a> <a href="#" class="button hvr-bounce-to-left">Bounce To Left</a> <a href="#" class="button hvr-bounce-to-bottom">Bounce To Bottom</a> <a href="#" class="button hvr-bounce-to-top">Bounce To Top</a> <a href="#" class="button hvr-radial-out">Radial Out</a> <a href="#" class="button hvr-radial-in">Radial In</a> <a href="#" class="button hvr-rectangle-in">Rectangle In</a> <a href="#" class="button hvr-rectangle-out">Rectangle Out</a> <a href="#" class="button hvr-shutter-in-horizontal">Shutter In Horizontal</a> <a href="#" class="button hvr-shutter-out-horizontal">Shutter Out Horizontal</a> <a href="#" class="button hvr-shutter-in-vertical">Shutter In Vertical</a> <a href="#" class="button hvr-shutter-out-vertical">Shutter Out Vertical</a>
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
アイコン
<a href="#" class="button hvr-icon-back">Icon Back</a> <a href="#" class="button hvr-icon-forward">Icon Forward</a> <a href="#" class="button hvr-icon-down">Icon Down</a> <a href="#" class="button hvr-icon-up">Icon Up</a> <a href="#" class="button hvr-icon-spin">Icon Spin</a> <a href="#" class="button hvr-icon-drop">Icon Drop</a> <a href="#" class="button hvr-icon-fade">Icon Fade</a> <a href="#" class="button hvr-icon-float-away">Icon Float Away</a> <a href="#" class="button hvr-icon-sink-away">Icon Sink Away</a> <a href="#" class="button hvr-icon-grow">Icon Grow</a> <a href="#" class="button hvr-icon-shrink">Icon Shrink</a> <a href="#" class="button hvr-icon-pulse">Icon Pulse</a> <a href="#" class="button hvr-icon-pulse-grow">Icon Pulse Grow</a> <a href="#" class="button hvr-icon-pulse-shrink">Icon Pulse Shrink</a> <a href="#" class="button hvr-icon-push">Icon Push</a> <a href="#" class="button hvr-icon-pop">Icon Pop</a> <a href="#" class="button hvr-icon-bounce">Icon Bounce</a> <a href="#" class="button hvr-icon-rotate">Icon Rotate</a> <a href="#" class="button hvr-icon-grow-rotate">Icon Grow Rotate</a> <a href="#" class="button hvr-icon-float">Icon Float</a> <a href="#" class="button hvr-icon-sink">Icon Sink</a> <a href="#" class="button hvr-icon-bob">Icon Bob</a> <a href="#" class="button hvr-icon-hang">Icon Hang</a> <a href="#" class="button hvr-icon-wobble-horizontal">Icon Wobble Horizontal</a> <a href="#" class="button hvr-icon-wobble-vertical">Icon Wobble Vertical</a> <a href="#" class="button hvr-icon-buzz">Icon Buzz</a> <a href="#" class="button hvr-icon-buzz-out">Icon Buzz Out</a>
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
ボーダー変化
<a href="#" class="button hvr-border-fade">Border Fade</a> <a href="#" class="button hvr-hollow">Hollow</a> <a href="#" class="button hvr-trim">Trim</a> <a href="#" class="button hvr-ripple-out">Ripple Out</a> <a href="#" class="button hvr-ripple-in">Ripple In</a> <a href="#" class="button hvr-outline-out">Outline Out</a> <a href="#" class="button hvr-outline-in">Outline In</a> <a href="#" class="button hvr-round-corners">Round Corners</a> <a href="#" class="button hvr-underline-from-left">Underline From Left</a> <a href="#" class="button hvr-underline-from-center">Underline From Center</a> <a href="#" class="button hvr-underline-from-right">Underline From Right</a> <a href="#" class="button hvr-reveal">Reveal</a> <a href="#" class="button hvr-underline-reveal">Underline Reveal</a> <a href="#" class="button hvr-overline-reveal">Overline Reveal</a> <a href="#" class="button hvr-overline-from-left">Overline From Left</a> <a href="#" class="button hvr-overline-from-center">Overline From Center</a> <a href="#" class="button hvr-overline-from-right">Overline From Right</a>
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
影・ぼかし変化
<a href="#" class="button hvr-shadow">Shadow</a> <a href="#" class="button hvr-grow-shadow">Grow Shadow</a> <a href="#" class="button hvr-float-shadow">Float Shadow</a> <a href="#" class="button hvr-glow">Glow</a> <a href="#" class="button hvr-shadow-radial">Shadow Radial</a> <a href="#" class="button hvr-box-shadow-outset">Box Shadow Outset</a> <a href="#" class="button hvr-box-shadow-inset">Box Shadow Inset</a>
Shadow Grow Shadow Float Shadow Glow Shadow Radial Box Shadow Outset Box Shadow Inset
スピーチバブル
<a href="#" class="button hvr-bubble-top">Bubble Top</a> <a href="#" class="button hvr-bubble-right">Bubble Right</a> <a href="#" class="button hvr-bubble-bottom">Bubble Bottom</a> <a href="#" class="button hvr-bubble-left">Bubble Left</a> <a href="#" class="button hvr-bubble-float-top">Bubble Float Top</a> <a href="#" class="button hvr-bubble-float-right">Bubble Float Right</a> <a href="#" class="button hvr-bubble-float-bottom">Bubble Float Bottom</a> <a href="#" class="button hvr-bubble-float-left">Bubble Float Left</a>
Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left
カール
<a href="#" class="button hvr-curl-top-left">Curl Top Left</a> <a href="#" class="button hvr-curl-top-right">Curl Top Right</a> <a href="#" class="button hvr-curl-bottom-right">Curl Bottom Right</a> <a href="#" class="button hvr-curl-bottom-left">Curl Bottom Left</a>
Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left
まとめ
こんな感じに、様々なホバーエフェクトが、クラスを指定するだけで手軽に使用できるようになります。
Hover.cssは、縮小版の「hover-min.css」だけで、現在101KBあります。全ての、エフェクトを使用せずとも、使用したいエフェクトだけを抽出して使用するための参考資料としても、もってこいだと思います。
恐れ入ります。
「呼び出す」というのがよく分からないのですが、設置したボタンにこれらの効果を働かせる場合は、サイト全体の場合、記事内の場合など、どのファイルのどこにコードを設置すればよいのでしょうか？
子テーマで編集しているので３番目のコードで設置を試しているのですが、ヘッダーやentry-body.php 、header-insert.php などに設置しても反応しないのですが…
ちなみに４番目のコードで記事内に直接設置すれば作動しますので Hover.css の場所が間違っているなどはないと思うのですが。
ローカル環境で試していますが、そのせいということはあるでしょうか？