Simple_Icon_Hover_Effects_with_CSSのデモページ

CSSのみで実装!Hoverエフェクトはこれだけで十分!Icon Hover Effects

2014.10.07   1139


アイコンフォントとCSSのみで実装できるIcon Hover Effects。
エフェクトの種類も豊富で、しかもどれも動きがかわいい。
是非一度デモを見てみて下さい。

 

Icon Hover Effectsのオススメ/ポイント

  •   CSSのみで実装できる
  •   hoverの動きが豊富で全18種類
  •   アイコンフォントだからカスタマイズ次第で幅広く使える

Icon Hover Effectsのデモ


Icon Hover Effectsのページ


Icon Hover Effectsの使い方

それではIcon Hover Effectsの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<div class="container">
    <section>
        <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
            <a href="#set-1" class="hi-icon hi-icon-mobile">Mobile</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
            <a href="#set-1" class="hi-icon hi-icon-screen">Desktop</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2a">
            <a href="#set-2" class="hi-icon hi-icon-cog">Settings</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2b">
            <a href="#set-2" class="hi-icon hi-icon-clock">Time</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a">
            <a href="#set-3" class="hi-icon hi-icon-images">Images</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3b">
            <a href="#set-3" class="hi-icon hi-icon-pencil">Edit</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4a">
            <a href="#set-4" class="hi-icon hi-icon-archive">Archive</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4b">
            <a href="#set-4" class="hi-icon hi-icon-chat">Chat</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a">
            <a href="#set-5" class="hi-icon hi-icon-earth">Partners</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5b">
            <a href="#set-5" class="hi-icon hi-icon-support">Support</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5c">
            <a href="#set-5" class="hi-icon hi-icon-locked">Security</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5d">
            <a href="#set-2" class="hi-icon hi-icon-videos">Videos</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-6">
            <a href="#set-6" class="hi-icon hi-icon-star">Fav</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-7 hi-icon-effect-7a">
            <a href="#set-7" class="hi-icon hi-icon-list">List</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-7 hi-icon-effect-7b">
            <a href="#set-7" class="hi-icon hi-icon-refresh">Refresh</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-8">
            <a href="#set-8" class="hi-icon hi-icon-bookmark">Bookmarks</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a">
            <a href="#set-9" class="hi-icon hi-icon-link">Link</a>
        </div>
        <div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9b">
            <a href="#set-9" class="hi-icon hi-icon-mail">Mail</a>
        </div>
    </section>
</div><!-- /container -->

CSSコード

<link rel="stylesheet" type="text/css" href="css/component.css" />
<style>
    /* デモ用に指定 */
    body{background-color:#41ab6b;}
    a{text-decoration:none;}
    .hi-icon-wrap{float:left;padding:2em 1em;}
    .container > section{padding:0.5em 5.5em;}
</style>

チェックポイント

ソースをダウンロードするとアイコンフォントが入ったfontsフォルダもあるので、忘れずに配置しよう。 デモは全て同じ色にするためにcomponent.cssのカラーを変更しているので注意。

プラグインへ一言

どのエフェクトもかわいくて素敵

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております