Simple Icon Hover Effects

A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
IconHoverEffects

From our monthly sponsor: Ship customer-facing metrics fast with Keen.io. Collect, store, query, & display stunning analytics.

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. For the icons we are using an icon font (Eco Ico by Matthew Skiles, created with the IcoMoon app) which we add using the :before pseudo-class.

Please note: this only works as intended in browsers that support the respective CSS properties.

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>

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

Note that a dashed border on a round pseudo-element (border-radius: 50%) does not work in FF 21.0 (effect 4)

I hope you enjoy the effects and find them inspiring!

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 116

Comments are closed.
  1. DoesnΒ΄t work in my Chrome on Windows 8, because it is detected as “touch”, even if i use my mouse
    Modernizrs touch-detection is not optimal, because it can only detect if the touch api is available, but not if a touch input is actually used…

  2. Very cool article, Lou!

    I was wondering, what are the options to utilize this on windows phone (7.5+) and windows (IE)? Is there a jquery plugin or a polyfill to help with the transitions? What do you recommend?

  3. I’m using Chrome + Windows 8 and it works fine for me. Very cool, thanks for sharing.

  4. Hi Mary,

    I want to say you: i love your work !
    But i have one question can you help me on a problem on my website? ( mainmenu/submenu)

    If you are available please contact me. i have modify your http://tympanus.net/Tutorials/SlideDownBoxMenu/ and adapt it on my site, but my mainmenu go away when my mouse go on submenu.. i’m not a pro of javascript. So please if you have the time, help me ^^ or put me on the way.

    Thanks again for you exceptionnal articles

  5. Superb and cool. Definitely we are going to use, but IE cries :(. Thanks a lot for sharing.

  6. It works fine for me (bit slow when using google chrome)and will come in handy,thanks for sharing this.

  7. Mary Lou. I had to come back. You made me laugh when I too a peek in the “Images” folder. You’re funny. ; )

  8. like it, works good in chrome, also win 8.
    for me prefer firs two type of animation.

  9. @Rajanand

    here : http://morganwahbi.com

    My problem is when you go on mainmenu and go on submenu, the first menu go away.

    Mainmenu is in CSS3 and submenu in JS. but i don’t know how to do the same effect of the mainmenu in jquery or JS.

    ps: sorry for my english

  10. Thanks Mary, these effects are very cool. I am designing an application for kids and will definitely use these effects! They should be exciting for kids too!