こんにちは！bibiです。
今回は、ホバーするだけでいろいろと動きを出し、
リニューアルなどに超絶使えるhover.cssの使い方です。
今回は、ボタンを作って、動かしてみましょう。
行程はわずかにこの4つだけ。
1.をダウンロードして所定の場所に設置
こちらのサイトで、一括ダウンロードから直接ダウンロードします。
使用するのはhover.cssだけで大丈夫です。
ダウンロードしたら、cssフォルダに置けばOK！
2.hover.cssのリンクをhtmlに記述
続いてこの記述を、htmlの所定の位置に記述します。簡単ですね！
|
1 |
<link href="css/hover.css" rel="stylesheet"> |
3.hover.css用のタグを設置
次に、ボタンを作るコードを、所定のcssに記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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; } |
4.htmlに、ボタンを設置する
最後に、このコードをボタンに記述します。
|
1 |
<a href="#" class="button">push</a> |
これで準備はOK！あとはclassの部分に動きのクラスを付与するだけで、簡単に動かすことができます。
|
1 |
<a href="#" class="button hvr-buzz-out">push</a> |
hover時に”震える”ボタン
|
1 |
<a href="#" class="button hvr-sweep-to-right">push</a> |
hover時に”左から右に色がつく”ボタン
このクラスは複数記述することもできます。ちなみに最後のコードは、ボタンではなくてもimgやh1、pタグなどにもつけることはできるので、簡単に動きを出すことができます！
|
1 |
<div class="hvr-buzz-out"><img src="images/***.jpg"></div> |
こんな感じですね。
いかがでしょうか？JavaScriptを使わないので、シンプルにできますよ。
動的なWeb作成ライフを満喫しましょう！