Simple Icon Hover Effects

DEMO

DOWNLOAD

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">

    <a href="#" class="hi-icon hi-icon-mobile">Mobile</a>

    <a href="#" class="hi-icon hi-icon-screen">Desktop</a>

    <a href="#" class="hi-icon hi-icon-earth">Partners</a>

    <a href="#" class="hi-icon hi-icon-support">Support</a>

    <a href="#" class="hi-icon hi-icon-locked">Security</a>

</div>

An example for a hover effect is the simple rotation of the pseudo-element for the icon:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.hi-icon-effect-6 .hi-icon {     box-shadow: 0 0 0 4px rgba(255,255,255,1);     transition: background 0.2s, color 0.2s;    }   .no-touch .hi-icon-effect-6 .hi-icon:hover {     background: rgba(255,255,255,1);     color: #64bb5d; }   .no-touch .hi-icon-effect-6 .hi-icon:hover:before {     animation: spinAround 2s linear infinite; }   @keyframes spinAround {     from {         transform: rotate(0deg)     }     to {         transform: rotate(360deg);     } }