Home » Featured » Simple Awesome Icon Hover Effects

Simple Awesome Icon Hover Effects

Today we want to share some simple icon hover effects with you. The idea is to create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements.

IH1

MARKUP

The markup only uses an anchor for the icon and we wrap a set into a container so that we can create a variety of effects:

<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>

EXAMPLE

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

.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);
    }
}

DEMO DOWNLOAD

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top